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

How do I find what Javascript is running on certain events?

提问by jesuis

I'll pick Chrome for this example, but I'm open to a solution from any browser.

我将在此示例中选择 Chrome，但我对来自任何浏览器的解决方案持开放态度。

Use Case: I have an update button on my website that is used to update item quantities in a shopping cart. I'd like to allow a user to enter a 0 and click update in order to remove the item. Trouble is, there is some listener in some js function that is denying the ability to enter a 0 and click update (after clicking update the old quantity remains).

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

My question is, what developer tool can I use to find which js function is running during that event? I don't think that Chrome's inspector does this, and I'm not very familiar with Firebug, but I couldn't find the functionality there either.

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

I feel that I should be able to inspect js firings just like I do css stylings. Is anyone aware of a tool I may use?

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

回答by Katana314

I've had to debug some particularly nasty unseen-cause Javascript issues at my job. Knowing the full depth of developer tools like Chrome's is definitely helpful. It undeniably takes some creativity to find places that might be causing the issue, but a few tips:

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

Tracking down event listeners

追踪事件监听器

Under Chrome's Elements view, try Inspect-ing an element (right-click, Inspect); then, on the right side of the developer view, scroll down to Event Listeners. Here you can view what code files have hooked up an event. Often, this will just point you to a middle-framework from the really devious code you're looking for, but sometimes it will point you in the right direction.

在 Chrome 的 Elements 视图下，尝试 Inspect-ing an element（右键单击，Inspect）；然后，在开发人员视图的右侧，向下滚动到 Event Listeners。在这里您可以查看哪些代码文件与事件相关联。通常，这只会将您从您正在寻找的真正曲折的代码中指向一个中间框架，但有时它会为您指明正确的方向。

Trapping a DOM modification

捕获 DOM 修改

Many of the unwanted effects I see are because of something changing some value or attribute on the page that I don't want. Anytime this happens, you can right-click on the element (under the Elements view) and say "Break on..." and the specific scenario you're looking for. When Chrome then hits a breakpoint, you can then look downward in the Stack Trace until you find something recognizable that shouldn't be called.

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

EDIT after reaching ten votes!

达到十票后编辑！

Trapping a JS object modification

捕获 JS 对象修改

If the change you're interested in is code-internal, not in the UI, things get trickier. What's meant by this scenario is that you know somewhere in the code, something incredibly annoying like the following is happening.

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

company.data.myObject.parameter = undefined;

In this situation, you know myObjectis still the same object, but it's being modified, perhaps unintentionally. For that, I often insert the following bit of code, sometimes just through the developer console at some point before said modification happens.

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

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

This includes an arrow function - you're only using this for debugging and Chrome supports it, so might as well save keystrokes. What this will do is freeze your debugger as soon as some line of code attempts to modify myObject's "parameter" property. You don't necessarily have to have a global reference to the variable if you can run this line of code from a previous breakpoint that will have the given object in the locals.

这包括一个箭头功能 - 您仅将其用于调试并且 Chrome 支持它，因此不妨保存击键。这将做的是在某些代码行尝试修改myObject的“ parameter”属性时立即冻结您的调试器。如果您可以从先前的断点运行这行代码，该断点将在局部变量中包含给定的对象，则您不一定必须拥有对该变量的全局引用。

---

---

Otherwise, if all I'm starting out with is the HTML code, and I want to tie that to Javascript code, I'll often just look for identifying features like "id" elements, and search all JS files in my development directory for it. Normally, I can reach it pretty fast.

否则，如果我开始的只是 HTML 代码，并且我想将其与 Javascript 代码联系起来，我通常只会寻找诸如“id”元素之类的识别特征，并在我的开发目录中搜索所有 JS 文件以查找它。通常，我可以很快到达它。

回答by Devendra Bhatte

1. Open your page in Firefox with Firebug enabled.
2. Go to console tab in firebug and click profiling
3. enter 0 in the textbox and click the button.
4. Stop profiling.
5. You will be able to see all the javascript functions which have executed due to your actions. You can view them one by one to figure out which method has caused the mischief.

1. 在启用 Firebug 的 Firefox 中打开您的页面。
2. 转到萤火虫中的控制台选项卡，然后单击分析
3. 在文本框中输入 0 并单击按钮。
4. 停止分析。
5. 您将能够看到由于您的操作而执行的所有 javascript 函数。你可以一一查看，找出是哪种方法造成了恶作剧。

回答by Ideal Bakija

Go to you code. If you are using jQuery there is going to be a function that will be called with the class or id of that particular update button. Or, if you are using Javascript, there is going to be a function called inside the

去你的代码。如果您正在使用 jQuery，将会有一个函数将使用该特定更新按钮的类或 ID 进行调用。或者，如果您使用的是 Javascript，则会在内部调用一个函数

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

These are the two ways to look for the function that is being called; there is no software that I know

这是查找被调用函数的两种方法；没有我知道的软件

回答by Johan

Download Firebugfor Mozilla Firefox, open it, click on Netand refresh your website. Than, you can see which files are loaded on the page.

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

If you want to check on errors and what goes wrong with an explanation, than click on consoleand refresh the page once again. You will see the errors and on which line it goes wrong.

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

Note: in your console, you can say holdor stop, so that the jsfile stops loading. And you can edit the script by clicking on scriptin Firebug. Debugging is simple, as it says on their official page https://getfirebug.com/javascript

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