Question

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

用例：我的网站上有一个更新按钮，用于更新购物车中的商品数量。我想允许用户输入0并单击更新以删除该项目。麻烦的是，在某些js函数中有一些监听器拒绝输入0和点击更新的能力（点击更新后旧数量仍然存在）。

我的问题是，我可以使用哪种开发人员工具来查找在该事件期间运行的js函数？我不认为Chrome的检查员会这样做，而且我对Firebug不太熟悉，但我也找不到它的功能。

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

Answer 1

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

追踪事件监听器

在Chrome的元素视图下，尝试检查元素（右键单击，检查）;然后，在开发人员视图的右侧，向下滚动到“事件监听器”。在这里，您可以查看连接事件的代码文件。通常情况下，这只会指向您正在寻找的非常狡猾的代码的中间框架，但有时它会指向正确的方向。

捕获DOM修改

我看到的许多不受欢迎的效果都是因为某些内容更改了我不想要的页面上的某些值或属性。任何时候发生这种情况，你可以右键单击元素（在Elements视图下）并说出“Break on ...”以及你正在寻找的特定场景。当Chrome然后点击断点时，您可以向下查看堆栈跟踪，直到找到不应该被识别的可识别的东西。

达到十票后编辑！

如果您感兴趣的更改是代码内部的，而不是在UI中，则事情会变得棘手。这个场景的意思是你知道代码中的某个地方，就像下面发生的那样令人难以置信的烦恼。

company.data.myObject.parameter = undefined;

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

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

这包括一个箭头功能 - 你只是用它进行调试而Chrome支持它，所以不妨保存按键。一旦代码行尝试修改myObject的“parameter”属性，这将会冻结您的调试器。如果您可以从先前断点处运行此行代码，那么您不一定必须拥有对该变量的全局引用。该断点将在本地中具有给定对象。

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

Answer 2

Answer 3

转到您的代码。如果您正在使用jquery，那么将会有一个函数将使用该特定更新按钮的类或ID进行调用。或者，如果您使用的是javascript，那么将会在

中调用一个函数

这是两种查找函数的方法，它没有我知道的软件

Answer 4

为Firebug下载Mozilla Firefox，打开它，点击Net并刷新您的网站。然后，您可以看到页面上加载了哪些文件。

如果您想检查错误以及解释有什么问题，请点击console并再次刷新页面。您将看到错误以及出错的行。

注意：在console中，您可以说hold或stop，以便js文件停止加载。您可以通过单击Firebug中的script来编辑脚本。调试很简单，正如它在官方页面https://getfirebug.com/javascript

上所说的那样