找出 JS 中的哪个文件/行正在更改元素的文本

Question

我正在为客户处理一个非常大（很多文件）且组织不善的 Web 项目。在混乱的某处，有一些 JavaScript 会截断 H3 标记并向它们添加省略号。我想找到那行脚本并将其删除。我只需要找出它在哪里......

手动搜索站点上的所有文件可能会花费很长时间（因为由于站点的代码不佳，产生 dom 操作的 JS 可能存在于 PHP 文件中的某个地方，或者存在于 JS 文件中，或者...谁知道）。

我知道，例如，使用 Chrome，您可以执行 DOM 操作断点。问题是，据我所知，Subtree modifications 和 Attributes modifications 断点实际上并不会因简单的 text 修改而中断。

在任何浏览器中是否有任何选项可以监听 DOM 元素并查看正在修改它的脚本在哪里？

Answer 1

在每个 js 文件中添加调试器调用，以强制在每个文件上暂停执行。如果在跳转特定停止点后 h3 发生变化，则有罪脚本很可能在该页面中（或者该函数正在该页面上被调用）。

Answer 2

要检查更改发生在服务器端还是客户端，您应该首先检查网络响应。如果文本在服务器响应中被截断，则更改已经发生在服务器端。如果不是，它发生在客户端。当它发生在客户端时，可以通过 JavaScript 或 CSS 来完成。

萤火虫

检查服务器响应

切换到 Net 面板，聚焦搜索字段，确保选中 Response Bodies 选项，然后输入标题（未截断）。如果找到，则更改发生在客户端。

检查 CSS

如果更改发生在客户端，它可能是某些 CSS 的一部分。 例如。有一个名为 text-overflow 的 CSS 属性，它允许在文本中添加省略号。

检查相关元素并在 Styles 或 Computed 侧面板中搜索是否为该元素设置了 text-overflow 属性。
省略号也可以通过将content 属性设置为省略号的技巧来实现。 如果你找不到任何这样的 CSS，则更改可能是通过 JavaScript 发生的。

检查 JavaScript

您可以在更改脚本的行处停止脚本执行，方法是在 HTML 面板中右键单击要检查的元素并选择 Break On Child Addition or Removal.

一旦文本被更改，脚本执行将在相关行停止。

示例

<p>foo</p>
<button onclick="changeText()">Change text</button>
<script>
function changeText() {
  var p = document.querySelector("p");
  p.textContent = "bar";
}
</script>

为<p>foo</p> 元素设置Break On Child Addition or Removal 以进行尝试。

注意：不幸的是，Firebug 并不总是跳转到正确的脚本或位置，但至少它会在 JavaScript 中发生更改时停止。

Chrome 开发工具

检查服务器响应

切换到 Network 面板并在网络请求的响应正文中搜索未截断的标题。 （据我所知，无法在响应正文中自动搜索。）如果找到，则更改发生在客户端。

检查 CSS

如上所述，更改也可能是 CSS 的一部分。

检查相关元素并在 Styles 或 Computed 侧面板中搜索是否为该元素设置了 text-overflow 或 content 属性。
如果你找不到任何这样的 CSS，则更改可能是通过 JavaScript 发生的。

检查 JavaScript

在 Chrome DevTools 中，它的工作方式与在 Firebug 中类似。因此，如果更改发生在客户端，请右键单击 Elements 面板中的元素并选择 Break on > Subtree modified from上下文菜单。

一旦文本被更改，脚本执行将在相关行停止。