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

如何查找特定事件上运行的Javascript?,javascript,google-chrome,firefox,firebug,web-inspector,Javascript,Google Chrome,Firefox,Firebug,Web Inspector,我会选择Chrome作为这个例子,但我对任何浏览器的解决方案都持开放态度 用例: 我的网站上有一个更新按钮,用于更新购物车中的商品数量。我希望允许用户输入0并单击“更新”以删除该项目。问题是,某些js函数中的某个侦听器拒绝输入0并单击“更新”(单击“更新”后,旧数量仍保留)的功能 我的问题是,我可以使用什么开发工具来查找在该事件期间运行的js函数?我认为Chrome的inspector不会这么做,我对Firebug也不是很熟悉,但我也找不到它的功能 我觉得我应该能够像检查css样式一样检查js触

我会选择Chrome作为这个例子,但我对任何浏览器的解决方案都持开放态度

用例: 我的网站上有一个更新按钮,用于更新购物车中的商品数量。我希望允许用户输入0并单击“更新”以删除该项目。问题是,某些js函数中的某个侦听器拒绝输入0并单击“更新”(单击“更新”后,旧数量仍保留)的功能

我的问题是,我可以使用什么开发工具来查找在该事件期间运行的js函数?我认为Chrome的inspector不会这么做,我对Firebug也不是很熟悉,但我也找不到它的功能


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

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

如果您想检查错误以及解释中出现的问题,请单击
控制台
,然后再次刷新页面。您将看到错误以及在哪一行出错


注意:在
控制台
中,您可以说
hold
stop
,这样
js
文件停止加载。您可以通过单击Firebug中的
script
来编辑脚本。调试很简单,正如他们在官方网页上所说的那样

转到您的代码。如果您使用的是jQuery,那么将使用特定更新按钮的类或id调用一个函数。或者,如果您使用的是Javascript,那么在



这是寻找被调用函数的两种方法;据我所知,没有一款软件

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

跟踪事件侦听器 在Chrome的Elements视图下,尝试检查一个元素(右键单击,检查);然后,在开发人员视图的右侧,向下滚动到事件侦听器。在这里,您可以查看连接事件的代码文件。通常,这只会将您从您正在寻找的真正迂回的代码中指向一个中间框架,但有时它会将您指向正确的方向

捕获DOM修改 我看到的许多不想要的效果都是因为某些东西改变了页面上我不想要的某些值或属性。任何时候发生这种情况,您都可以右键单击元素(在“元素”视图下),然后说“打开…”和您正在寻找的特定场景。当Chrome遇到断点时,您可以向下查看堆栈跟踪,直到找到不应该调用的可识别的内容

达到10票后编辑

捕获JS对象修改 如果您感兴趣的更改是内部代码,而不是UI中的代码,那么事情会变得更加棘手。这个场景的意思是,你知道在代码的某个地方,发生了如下令人难以置信的恼人的事情

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

Object.defineProperty(company.data.myObject, 'parameter', {
  set: (val) => {
    debugger;
  }
});
这包括一个箭头功能-您只使用它进行调试,Chrome支持它,所以最好保存击键。这将在某些代码行试图修改myObject的“
参数”
”属性时冻结调试器。如果可以从上一个断点运行这行代码,则不一定要有对变量的全局引用,该断点将以局部变量形式包含给定对象


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

  • 在启用Firebug的Firefox中打开页面
  • 转到firebug中的控制台选项卡,然后单击分析
  • 在文本框中输入0,然后单击按钮
  • 停止分析
  • 您将能够看到由于您的操作而执行的所有javascript函数。您可以逐个查看它们,以找出是哪种方法导致了这种破坏

  • 如果没有错误怎么办?它运行,但我想编辑它。那我怎么才能找到它呢?因为那里什么也看不见。如果没有错误,则表示代码正在工作。也许这不是您想要的工作方式,但是没有错误,因此代码也没有问题。当然,有可能没有加载
    js
    文件,这就是为什么我说先检查
    net
    。当然,代码可能有问题:它会产生不想要的结果。即使没有错误,您是否使用调试器检查某些不需要的输出发生的原因?谢谢;我怎么找到里面的文件?看起来有点悲伤,不是吗?为什么我找不到在特定实例中运行的脚本?似乎是必要的。是的,这很遗憾,但是你不能像跟踪php函数一样跟踪控制台中的js函数。这是技术原因吗?这很好,谢谢!我希望有人能回答这个问题,他有这样丰富的经验。我想我可能从你的第一个建议中找到了合适的地方。我会继续找,但我想你提到的三件事就是我要找的。我从未见过“事件侦听器”部分。