34

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?

4

4 回答 4

51

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

追踪事件监听器

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

捕获 DOM 修改

我看到的许多不想要的效果是因为某些东西改变了我不想要的页面上的某些值或属性。任何时候发生这种情况，您都可以右键单击元素（在元素视图下）并说“Break on...”以及您正在寻找的特定场景。当 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 文件它。通常，我可以很快达到它。

于 2013-08-06T21:18:31.347 回答
8
  1. 在启用 Firebug 的 Firefox 中打开您的页面。
  2. 转到 firebug 中的控制台选项卡，然后单击分析
  3. 在文本框中输入 0 并单击按钮。
  4. 停止分析。
  5. 您将能够看到由于您的操作而执行的所有 javascript 函数。您可以一一查看，以确定是哪种方法造成了恶作剧。
于 2013-08-07T11:39:16.837 回答
1

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

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

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

于 2013-08-06T18:03:26.003 回答
0

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

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

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

于 2013-08-06T18:02:16.190 回答