如何查找特定事件上运行的Javascript？

Question

我会选择Chrome作为例子，但我可以接受来自任何浏览器的解决方案。

应用场景： 我的网站上有一个更新按钮，用于更新购物车中的商品数量。我想让用户输入0并单击更新以删除该商品。问题在于，在某些JavaScript函数中存在某个监听器，它阻止了输入0并单击更新（单击更新后旧数量仍然保持不变）。

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

我觉得我应该能够像查看CSS样式一样检查JavaScript的执行情况。是否有人知道可以使用的工具？

- jesuis

Answer 1

我在工作中不得不调试一些特别恶心的看不见原因的Javascript问题。了解像Chrome这样的开发者工具的完整深度肯定是有帮助的。毫无疑问，需要一些创造力来找到可能导致问题的地方，但是有一些提示:

追踪事件监听器

在Chrome的元素视图下，尝试检查一个元素（右键，检查），然后，在开发者视图的右侧向下滚动到事件监听器。在这里，您可以查看哪些代码文件已经连接到一个事件上。通常，这只会让你指向一个从你正在寻找的非常阴险的代码中间框架，但有时它会指向正确的方向。

捕获DOM修改

我看到的许多不受欢迎的影响是因为某些东西改变了页面上我不想要的一些值或属性。每当发生这种情况时，您可以右键单击元素（在元素视图下）并说“断点”以及您要查找的特定情况。当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 文件。通常，我可以很快找到它。

- Katana314

---

太好了，谢谢！我希望有经验丰富的人能回答。我认为我可能已经从你的第一个建议中找到了位置。我会继续寻找，但我认为你提到的三件事就是我要找的。我以前从未见过“事件监听器”部分。 - jesuis

Answer 2

1. 在Firefox浏览器中打开您的页面，并启用Firebug插件。
2. 切换到Firebug控制台标签，点击“Profiling”按钮。
3. 在文本框中输入0并点击按钮。
4. 停止分析。
5. 您将能够看到由于您的操作而执行的所有JavaScript函数。您可以逐个查看它们，以找出哪个方法引起了问题。

- Devendra Bhatte

Answer 3

前往你的代码。如果你正在使用jQuery，那么会有一个函数被调用，该函数将使用特定更新按钮的类或ID。或者，如果你正在使用JavaScript，那么会有一个函数在

中被调用。

<input type="button" name="update" onclick="update()">

以下是查找被调用函数的两种方法；在我所知道的软件中没有这个功能。

- Ideal Bakija

---

似乎有点悲哀，不是吗？为什么我找不到在特定实例中运行的脚本？这似乎是必要的。 - jesuis

是的，这很令人遗憾，但你无法像跟踪PHP函数调用一样在控制台中跟踪JS函数。 - Ideal Bakija

有技术上的原因吗？ - jesuis

Answer 4

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

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

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

- Johan

---

如果没有错误怎么办？它运行了，但我想编辑它。那么我该如何找到它呢？ - jesuis

如果没有错误，那么代码是有效的，这时就看不到任何问题。也许它的运行方式不符合你的期望，但既然没有错误，那么代码本身就没有问题。当然，有可能js文件未加载，这就是为什么我建议先检查网络。 - Johan

当然，代码可能存在问题：它会产生不想要的结果。即使没有错误，您也会使用调试器来检查为什么会发生某些不想要的输出吗？ - jesuis

谢谢；我该如何找到它所在的文件？ - jesuis