3

我经常想更改一些关于 JS 如何更改 DOM 的相对较小的细节，但我永远无法弄清楚哪个脚本中的哪个函数更改了给定的标签。如何做到这一点？

例如，在这个页面上，我希望将“选定”类添加到各种 a 标签的任何 JS 也将其添加到封闭的 li 标签。但是，我不知道如何弄清楚这是在哪里发生的。

澄清：尽管我想回答我当前的具体难题，但我更愿意被教导如何自己解决这个问题。

澄清：有没有办法指向 DOM 中的某个对象并找出正在/正在访问/修改该对象的脚本？换句话说，“监视”该对象以进行 JS 访问/修改。

4

2 回答 2

3

您需要的是WebKit 开发者工具中的DOM 断点。

它们旨在跟踪 DOM 突变事件 - 例如元素属性的更改（这是您的情况）、元素删除或添加子元素。您可以参考 DevTools 文档中的教程。

在基本情况下，您可能希望grep用于搜索"selected"代码中的字符串。

于 2013-06-13T23:23:03.013 回答
1

我不知道有任何调试工具会告诉您脚本何时对 DOM 元素进行操作。

（如果有人知道，亲爱的主，请告诉我——我是一名自由职业者，所以我大部分工作日都在试图找出别人编写的旧的、棘手的 DOM 操作 JavaScript。）

您基本上必须搜索页面中包含的所有 JavaScript 文件，并确定可能正在执行您所看到的操作的行。

在将类名添加到元素的情况下，明显的搜索是类名本身，尽管这不能保证有效。例如

el.className = el.className + 'sel' + 'elected'

如果使用 jQuery，我肯定会搜索addClass.

一旦您认为您找到了正确的行，那么如果您可以访问 JavaScript 代码，您可以更改它并查看您的更改是否生效。

（而且，由于查看源代码仍然是 Web 的一部分，您可以通过将代码全部保存到您的计算机来访问代码。）

于 2013-06-13T23:30:50.623 回答