关闭 Chrome 开发工具后，Web 应用程序无法运行答案

【问题标题】：Web app does not work when Chrome devtools is closed关闭 Chrome 开发工具后，Web 应用程序无法运行
【发布时间】：2017-11-17 13:57:28
【问题描述】：

我正在使用带有大量 Ajax 调用的 JQuery 开发一个前端 Web 应用程序。我的问题是，每当 Chrome devtools 关闭时，应用程序都无法按预期工作（尤其是 Ajax 附加内容）。另一方面，当 Chrome devtools 打开时，一切正常。

我读过一些类似的帖子，起初它们很有帮助，但现在我遇到了同样的问题，我不知道为什么。

注意：

1) 所有 Ajax 调用都设置为 cache:false 建议 here。

2) 我已按照我无法再找到的另一篇文章中的建议删除了所有控制台日志。

这两个建议都暂时奏效了一段时间，但现在我离开了。 关于 Chrome 开发工具如何干扰 Ajax 的任何其他建议？

【问题讨论】：

什么具体不起作用？您收到什么错误消息？（您可以在 UI 上显示它们，或者将它们存储起来以供以后在开发工具中查看）
如果您可以在隐身窗口中重现它，而无需任何扩展名和默认值的 chrome://flags，则可能是浏览器错误。尝试在以前和下一个版本的便携式 chrome 中复制它，如果还没有，请在 crbug.com 上提交报告。
我很好奇：当您运行解决方案的发布版本时，它会继续工作吗？是否启用了 Visual Studio 中的 Chrome 脚本调试？您是否启用了浏览器链接或是否大量使用它？

标签： javascript jquery ajax google-chrome-devtools

【解决方案1】：

因此，某些 JQuery 方法（.hover()、.click() 等）似乎没有应用于某些 Ajax 内容，并且使用 .load() 加载了 HTML。我认为我可以通过以下方式避免这个问题：

1) 将适用于 Ajax 内容的代码包装在 window.onload 处理函数中

2) 委派所有相关的事件处理程序

   window.onload = function() {
      $(document).on("click","#id",function(){//do stuff});
      doSomethingElse();
   };

在尝试了一些事情之后，我最终使用 .ajaxComplete() JQuery 方法代替了 window.onload，如下所示：

        $(document).ajaxComplete(function(event, xhr, settings) {
            if (settings.url.startsWith("https:...[static portion of URI]")) {
                $(document).on("click","#id",function(){//do stuff});
                doSomethingElse();
            }
        });

它有效。此处的if 语句在我遇到问题的部分中的第一个 Ajax 调用被调用时触发（第一次调用中来自 complete() 的其他 Ajax 调用链）。

那么，这与 Chrome 开发工具有什么关系？

事实证明，这并没有直接关系。我能够在 Firefox 和 Opera 中重现该问题。在 Firefox 和 Opera 中，该问题不太常见，并且开放的开发人员工具对性能没有太大影响。在 Chrome 中，打开的 devtools 产生了重大影响，我认为这个问题甚至不会发生一次。

【讨论】：