我将为此示例选择 Chrome，但我愿意接受来自任何浏览器的解决方案。
用例： 我的网站上有一个更新按钮，用于更新购物车中的商品数量。我想允许用户输入 0 并单击更新以删除该项目。麻烦的是，一些js函数中有一些监听器拒绝输入0并点击更新（点击更新后旧数量仍然存在）。
我的问题是，我可以使用什么开发工具来查找该事件期间正在运行的 js 函数？我不认为 Chrome 的检查器会这样做，而且我对 Firebug 不是很熟悉，但我也找不到那里的功能。
我觉得我应该能够像检查 css 样式一样检查 js 触发。有人知道我可能使用的工具吗？
【问题讨论】：
标签： javascript google-chrome firefox firebug web-inspector
为Mozilla Firefox下载Firebug，打开它，点击Net并刷新您的网站。然后，您可以看到页面上加载了哪些文件。
如果您想检查错误和解释中的问题，请单击console 并再次刷新页面。您将看到错误以及出错的位置。
注意：在您的console 中，您可以说hold 或stop，以便js 文件停止加载。您可以通过在 Firebug 中单击 script 来编辑脚本。调试很简单，正如他们官方页面https://getfirebug.com/javascript上所说的那样
【讨论】：
js文件没有加载，所以我说先检查net。
转到您的代码。如果您使用的是 jQuery，那么将使用该特定更新按钮的类或 id 调用一个函数。或者，如果您使用的是 Javascript，则会在
内部调用一个函数<input type="button" name="update" onclick="update()">
这是查找被调用函数的两种方法；没有我知道的软件
【讨论】：
在我的工作中，我不得不调试一些特别讨厌的、看不见的 Javascript 问题。了解 Chrome 等开发人员工具的全部深度绝对是有帮助的。无可否认，找到可能导致问题的地方需要一些创造力，但有一些提示：
在 Chrome 的 Elements 视图下，尝试检查元素（右键单击，检查）；然后，在开发人员视图的右侧，向下滚动到 Event Listeners。在这里，您可以查看哪些代码文件与事件挂钩。通常，这只会将您从您正在寻找的真正狡猾的代码中指向一个中间框架，但有时它会为您指明正确的方向。
我看到的许多不想要的效果是因为某些东西改变了我不想要的页面上的某些值或属性。任何时候发生这种情况，您都可以右键单击元素（在元素视图下）并说“Break on...”以及您正在寻找的特定场景。当 Chrome 然后遇到断点时，您可以在 Stack Trace 中向下查看，直到找到可识别但不应调用的内容。
达到十票后编辑！
如果您感兴趣的更改是代码内部的，而不是 UI 中的，事情就会变得更加棘手。这个场景的意思是你知道代码中的某个地方，正在发生一些令人难以置信的令人讨厌的事情，如下所示。
company.data.myObject.parameter = undefined;
在这种情况下，您知道myObject 仍然是同一个对象，但它正在被修改，可能是无意的。为此，我经常插入以下代码，有时只是在上述修改发生之前的某个时间通过开发者控制台。
Object.defineProperty(company.data.myObject, 'parameter', {
set: (val) => {
debugger;
}
});
这包括一个箭头功能 - 您仅将其用于调试并且 Chrome 支持它，因此不妨节省击键。这将在某行代码尝试修改myObject 的“parameter”属性时立即冻结您的调试器。如果您可以从先前的断点运行这行代码，那么您不一定必须具有对变量的全局引用，该断点将在局部变量中具有给定对象。
否则，如果我开始的只是 HTML 代码，并且我想将它与 Javascript 代码联系起来，我通常会寻找识别特征，如“id”元素，并搜索我的所有 JS 文件它的开发目录。通常，我可以很快达到它。
【讨论】：
【讨论】：