Chrome DevTools初始化崩溃及脚本追加页面崩溃问题求助

Hey there, let's break down and troubleshoot this script injection crash you're facing—super frustrating when something that worked suddenly blows up!

Possible Causes & Fixes to Try #

1. The Script Content Itself Is Triggering a Crash

First, let's rule out whether the issue is with the script you're injecting, not the appendChild call itself.

• Test with a minimal script: Replace your quote script content with something harmless like console.log('test injection') and see if the crash still happens. If it doesn't, the problem lies in your actual quote-generating script—look for:
  • Infinite loops or recursive functions that never terminate
  • Massive DOM manipulation that's eating up memory
  • Accidental page reloads/redirects hidden in the script logic
• Add error handling: Wrap your script execution logic in a try-catch block to catch unhandled errors before they take down the page:

  try {
    // Your script creation and append logic here
  } catch (err) {
    console.error('Script injection failed:', err);
  }
  

2. Duplicate Scripts Are Piling Up (Memory Leak)

Even if you thought you were removing old scripts, maybe the cleanup logic isn't fully working.

• Enforce a single script instance: Assign a unique ID to your injected script so you can explicitly remove it before adding a new one:

  // Remove existing script first
  const oldScript = document.getElementById('quote-fetcher-script');
  if (oldScript) {
    oldScript.remove();
  }
  // Create new script
  const newScript = document.createElement('script');
  newScript.id = 'quote-fetcher-script';
  newScript.src = 'your-quote-script-url.js'; // Or set textContent for inline scripts
  document.body.appendChild(newScript);
  

• Verify cleanup in DevTools: After clicking the button, check the Elements tab to make sure old script elements are actually being removed from the DOM—not just hidden or disabled.

3. Asynchronous Loading/Execution Conflicts

If your script loads external resources, race conditions might be causing unexpected crashes.

• Use onload/onerror handlers: Ensure you only interact with the script after it's fully loaded, and handle failures gracefully:

  const script = document.createElement('script');
  script.src = 'your-quote-script-url.js';
  script.onload = () => {
    console.log('Script loaded successfully—run quote logic here');
  };
  script.onerror = (error) => {
    console.error('Failed to load script:', error);
    // Don't let a failed load crash the whole page
  };
  document.body.appendChild(script);
  

4. DevTools Quirks (Less Likely, But Worth Checking)

Sometimes DevTools itself can get into a weird state when dealing with frequent DOM changes:

• Close and reopen DevTools
• Disable any active DOM breakpoints or memory profiling tools
• Try testing in an incognito window to rule out extension interference

Start with the first two checks—they're the most common culprits when a previously working script injection starts crashing the page. Let me know if you narrow down where the issue is!

内容的提问来源于stack exchange，提问作者KhoaVo