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

Question

我正在处理一个非常大的（很多文件）和一个客户端组织不良的Web项目。在乱七八糟的东西中有一些JavaScript正在截断H3标签并向它们添加省略号。我想找到那行脚本并将其删除。我只需要知道它在哪里......

手动搜索网站上的所有文件可能需要永远（因为，由于网站代码不佳，产生dom操作的JS可能存在于某个地方的PHP文件中，或者存在于JS文件中，或者......谁知道。

我知道，例如，使用Chrome，您可以执行DOM操作断点。问题在于，我可以告诉Subtree modifications和Attributes modifications断点并没有真正打破简单的文本修改。

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

Answer 1

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

Answer 2

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

萤火虫

检查服务器响应

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

检查CSS

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

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

检查JavaScript

您可以通过在 HTML 面板中右键单击要检查的元素，然后选择 Break On Child Addition或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或Removal 以试用它。

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

Chrome DevTools

检查服务器响应

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

检查CSS

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

检查检查相关元素并在样式或 Computed 侧面板中搜索是否设置了text-overflow或content属性对于元素。
如果你找不到那样的CSS，那么改变可能是通过JavaScript发生的。

检查JavaScript

在Chrome DevTools中，它的工作方式类似于Firebug。因此，如果在客户端发生更改，请右键单击 Elements 面板中的元素，然后选择 Break on ＆gt;从上下文菜单中子树修改。

更改文本后，脚本执行将停止在相关行。