Chrome 尝试使用 JQuery 获取表单控件值时在调试器中抛出 Aw Snap

Question

使用 JQuery 我在 Bootstrap v3.3 按钮上添加了一个点击处理程序。在那个函数里面我有 javascript:

//
featureInfo.main_rgb = $("#f_mainRGB").val();
featureInfo.main_rgb = (featureInfo.main_rgb == "") ? null : featureInfo.main_rgb.substring(1);
//
featureInfo.stripe_rgb = $("#f_stripeRGB").val();
featureInfo.stripe_rgb = (featureInfo.stripe_rgb == "") ? null : featureInfo.stripe_rgb.substring(1);
//
featureInfo.border_rgb = $("#f_borderRGB").val(); // here is where it barfs
featureInfo.border_rgb = (featureInfo.borderRGB == "") ? null : featureInfo.border_rgb.substring(1);

即从3个HTML 5个颜色控件中获取值，并将它们放在一个JSON对象中，供稍后AJAX调用更新数据。前两个，mainRGB 和 stripeRGB 工作没有问题，但 val() 的 borderRGB cal 导致 Chrome 选项卡立即变为 "Aw, Snap"。没有像意外无限循环导致的内存不足错误那样的停顿。

如果我尝试使用基本 javascript、不使用 JQuery 并使用 document.getElementById("f_borderRGB")，开发者工具会显示以下错误：

metadata.jsp:259 Uncaught TypeError: Cannot convert undefined or null to object
at HTMLButtonElement.doEditSelectedFeature (metadata.jsp:259)
at HTMLButtonElement.dispatch (jquery.min.js:3)
at HTMLButtonElement.q.handle (jquery.min.js:3)
doEditSelectedFeature @ metadata.jsp:259
dispatch @ jquery.min.js:3
q.handle @ jquery.min.js:3

如果我在获取这三个控件的值时更改顺序，则它总是发生在第三个控件上，而不管它是哪个特定控件。

此外，只有当我使用开发人员工具调试该函数并使用 F10 跨过该行代码时，才会发生这种情况。即使该行是下一个要执行的行并且我按 F8 继续运行而不是 F10 而不是停止，错误也不会发生。

当另一个 AJAX 使用来自服务器的数据调用 returns 时，JQuery 输出表单的 HTML5

var h = "<form class=\"form-horizontal\">" +
    "<div class=\"form-group\">" +
        "<div class=\"col-xs-3 col-sm-3 col-md-3 col-lg-3 text-right\"><label  for=\"f_mainRGB\">Main RGB: </label></div>" +
        "<div class=\"col-xs-1 col-sm-1 col-md-1 col-lg-1\"><input class=\"form-control\" type=\"color\" id=\"f_mainRGB\" value=\"#"+filterEmptyString(featureInfo.main_rgb)+"\" disabled/></div>"+
        "<div class=\"col-xs-1 col-sm-1 col-md-1 col-lg-1\" id=\"i_mainRGB\"></div>" +
    "</div>"+
    //
    "<div class=\"form-group\">" +
        "<div class=\"col-xs-3 col-sm-3 col-md-3 col-lg-3 text-right\"><label  for=\"f_stripeRGB\">Stripe RGB: </label></div>" +
        "<div class=\"col-xs-1 col-sm-1 col-md-1 col-lg-1\"><input class=\"form-control\" type=\"color\" id=\"f_stripeRGB\" value=\"#"+filterEmptyString(featureInfo.stripe_rgb)+"\" disabled/></div>"+
        "<div class=\"col-xs-1 col-sm-1 col-md-1 col-lg-1\" id=\"i_stripeRGB\"></div>" +
    "</div>"+
    //
    "<div class=\"form-group\">" +
        "<div class=\"col-xs-3 col-sm-3 col-md-3 col-lg-3 text-right\"><label  for=\"f_borderRGB\">Border RGB: </label></div>" +
        "<div class=\"col-xs-1 col-sm-1 col-md-1 col-lg-1\"><input class=\"form-control\" type=\"color\" id=\"f_borderRGB\" value=\"#"+filterEmptyString(featureInfo.border_rgb)+"\" disabled/></div>"+
        "<div class=\"col-xs-1 col-sm-1 col-md-1 col-lg-1\" id=\"i_borderRGB\"></div>" +
    "</div></form>";
$("#pfSelectedFeatureInfo").html(h);

Firefox 中不会出现此问题。

知道是什么原因造成的吗？

Answer 1

这是 Chrome DevTools 中的一个错误，开发人员说他们需要一段代码来演示它。我无法发送我的代码 (NDA)，但也许你可以？看看这里！ https://bugs.chromium.org/p/chromium/issues/detail?id=839449#c8

Chrome 尝试使用 JQuery 获取表单控件值时在调试器中抛出 Aw Snap

Chrome throwing an Aw Snap in debugger when trying to get form control value with JQuery

crash

jquery

google-chrome