javascript - 如何找到某些事件上正在运行的 Javascript？

Question

我将选择 Chrome 作为示例，但我愿意接受任何浏览器的解决方案。

用例:我的网站上有一个更新按钮，用于更新购物车中的商品数量。我想允许用户输入 0 并单击更新以删除该项目。问题是，某些 js 函数中有一些监听器拒绝输入 0 并单击更新的能力(单击更新后，旧数量仍然保留)。

我的问题是，我可以使用什么开发工具来查找该事件期间正在运行哪个 js 函数？我不认为 Chrome 的检查器会这样做，而且我对 Firebug 不是很熟悉，但我也找不到那里的功能。

我觉得我应该能够像检查 css 样式一样检查 js 触发情况。有人知道我可以使用的工具吗？

Answer 1

我在工作中不得不调试一些特别令人讨厌的、看不见的 Javascript 问题。了解 Chrome 等开发工具的全部深度绝对有帮助。无可否认，找到可能导致问题的地方需要一些创造力，但有一些提示:

追踪事件监听器

在 Chrome 的元素 View 下，尝试检查元素(右键单击，检查)；然后，在开发人员 View 的右侧，向下滚动到“事件监听器”。在这里您可以查看哪些代码文件已连接事件。通常，这只会将您从您正在寻找的真正不正当的代码中引向中间框架，但有时它会为您指出正确的方向。

捕获 DOM 修改

我看到的许多不需要的效果都是由于更改了我不想要的页面上的某些值或属性而造成的。每当发生这种情况时，您都可以右键单击该元素(在“元素” View 下)并说出“中断...”以及您要查找的特定场景。当 Chrome 遇到断点时，您可以在堆栈跟踪中向下查找，直到找到不应调用的可识别内容。

达到十票后编辑!

捕获 JS 对象修改

如果您感兴趣的更改是代码内部的，而不是 UI 中的，那么事情会变得更加棘手。这种情况的意思是，您知道代码中的某个地方正在发生如下令人难以置信的烦人的事情。

company.data.myObject.parameter = undefined;

在这种情况下，您知道 myObject 仍然是同一个对象，但它正在被修改，也许是无意的。为此，我经常插入以下代码，有时只是在所述修改发生之前的某个时刻通过开发人员控制台插入。

Object.defineProperty(company.data.myObject, 'parameter', {
  set: (val) => {
    debugger;
  }
});

这包括一个箭头功能 - 您仅使用它进行调试，并且 Chrome 支持它，因此不妨节省击键次数。这样做的作用是，一旦某行代码尝试修改 myObject 的“parameter”属性，就会卡住调试器。如果您可以从先前的断点运行这行代码(该断点将在局部变量中包含给定对象)，则不一定需要对该变量进行全局引用。

<小时/>

否则，如果我一开始只是 HTML 代码，并且我想将其与 Javascript 代码联系起来，那么我通常只会查找“id”元素等标识功能，并搜索我的文件中的所有 JS 文件。它的开发目录。通常情况下，我可以很快到达。