如何找到在特定事件上运行的Javascript？ [英] How do I find what Javascript is running on certain events?

问题描述

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

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

我觉得我应该能够像我做CSS样式一样检查js的发射。有谁知道我可以使用的工具？

解决方案

我不得不调试一些特别讨厌的看不见的原因JavaScript的问题我的工作。了解像Chrome这样的开发人员工具的深度绝对是有帮助的。无可否认，需要一些创造力来找到可能导致问题的地方，但有一些提示：

追踪事件监听器

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

陷印一个DOM修改

我看到的许多不需要的效果是因为改变了某些我不想要的值或属性的东西。每当发生这种情况，您可以右键单击该元素（在元素视图下），然后说Break on ...以及您正在查找的特定场景。当Chrome浏览器打到一个断点时，你可以在堆栈跟踪中向下看，直到你发现一些不应该被调用的可识别的东西。

/ p>

陷印JS对象修改

如果您感兴趣的更改是代码内部的，而不是用户界面，事情变得棘手。这种情况的意思是，你知道代码中的某个地方，像下面这样令人难以置信的烦人的事情。

  company.data .myObject.parameter = undefined; 
  

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

  Object.defineProperty（company.data.myObject，'parameter'，{
 set：（val）=> {
 debugger; 
} 
}）; 
  

这包括一个箭头函数 - 只用于调试，Chrome支持，所以可能以及保存击键。这样做只要一行代码尝试修改 myObject 的参数就冻结调试器。属性。如果您可以从之前的断点中运行这段代码，那么您不一定必须拥有对该变量的全局引用。

---

否则，如果我刚开始使用的是HTML代码，并且想要将其绑定到Javascript代码，那么我经常只是寻找识别id元素，并搜索我的开发目录中的所有JS文件。通常情况下，我可以很快达到。

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

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).

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.

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?

解决方案

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:

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.

Trapping a DOM modification

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.

EDIT after reaching ten votes!

Trapping a JS object modification

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.

company.data.myObject.parameter = undefined;

In this situation, you know myObject is 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.

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.

---

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.

这篇关于如何找到在特定事件上运行的Javascript？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！