Chrome调试器中用jQuery获取表单控件值时出现Aw Snap错误

Let's dig into why you're seeing that frustrating "Aw Snap" crash in Chrome when your Bootstrap button's click handler runs, and how to fix it.

First, let's recap your context: you're using jQuery with Bootstrap 3.3, and in your button click handler, you're modifying featureInfo properties by stripping the leading character from RGB values (or setting to null if empty). The crash happens around the border RGB line—even though it's commented out—so the issue might be in the lines above, or tied to how featureInfo is structured.

Common Causes & Fixes #

1. featureInfo is not a valid object (or has unexpected properties) #

Chrome's "Aw Snap" can trigger if you're accessing properties on an invalid object, especially if that object has circular references or is tied to a large DOM tree causing memory bloat.

• Check what featureInfo actually is: Add console.log(featureInfo) at the start of your handler. Look for:

  • Is it a plain JavaScript object, or a DOM element/other complex type?
  • Do its properties (main_rgb, stripe_rgb) exist, and are they strings?
  • Are there circular references (e.g., featureInfo references a DOM element that references featureInfo)?

• Fix: Ensure featureInfo is initialized properly before your handler runs. If it's supposed to be a plain object, initialize it like this if it doesn't exist:

  // At the top of your script or handler
  window.featureInfo = window.featureInfo || { main_rgb: "", stripe_rgb: "", border_rgb: "" };
  

2. Unhandled errors triggering infinite loops/memory leaks #

Even if you don't see a console error, a hidden error (like calling substring() on a non-string value) might be caught by a global error handler that's causing an infinite loop, eventually crashing Chrome.

• Add strict type checking: Modify your code to validate the type of each property before manipulating it:

  // Handle main_rgb safely
  if (typeof featureInfo.main_rgb === 'string') {
    featureInfo.main_rgb = featureInfo.main_rgb.trim() === "" ? null : featureInfo.main_rgb.substring(1);
  } else {
    featureInfo.main_rgb = null;
    console.warn("main_rgb is not a valid string:", featureInfo.main_rgb);
  }
  
  // Handle stripe_rgb the same way
  if (typeof featureInfo.stripe_rgb === 'string') {
    featureInfo.stripe_rgb = featureInfo.stripe_rgb.trim() === "" ? null : featureInfo.stripe_rgb.substring(1);
  } else {
    featureInfo.stripe_rgb = null;
    console.warn("stripe_rgb is not a valid string:", featureInfo.stripe_rgb);
  }
  

3. Duplicate event bindings causing repeated execution #

If your button is dynamically generated (e.g., inside a Bootstrap modal that gets recreated), you might be binding the click handler multiple times. Each click then runs the handler dozens/hundreds of times, eating up memory until Chrome crashes.

• Check for duplicate bindings: Use jQuery's off() before on() to ensure only one handler is attached:

  // Instead of just $('.btn').click(...)
  $('.btn').off('click').on('click', function() {
    // Your handler code here
  });
  

4. Chrome extension interference #

Sometimes browser extensions can conflict with your script, causing unexpected crashes.

• Test in incognito mode: Disable all extensions by opening Chrome in incognito and testing your button. If the crash doesn't happen, disable extensions one by one to find the culprit.

Step-by-Step Debugging #

1. Isolate the problem: Comment out all code in your handler except a simple console.log("Button clicked"). If the crash stops, the issue is in your RGB processing code.
2. Reintroduce code line by line: Add back one line at a time and test. This will tell you exactly which line triggers the crash.
3. Check memory usage: Open Chrome's DevTools > Performance tab, record a profile while clicking the button. Look for sudden spikes in memory usage that could indicate a leak.

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