如何调试未知 html + js：如何跟踪 .js 正在为特定 class 修改 html？
How to debug unknown html + js: How to trace what .js is modding html for a specific class?
我正在维护一个网站，该网站执行一些神奇的行为（好吧，它添加了一些不在 html 中的字符）到标记的元素：
class="popupover-host"
我找不到在 css 中引用它，并且到目前为止在任何 .js
中都没有看到它被引用
在浏览器中，它是预呈现的，检查元素会显示完全处理的文本（例如源中的文本 html 加上添加的字符）。
我觉得我需要观察浏览器处理 html，但以前没有这样做过。
问题归结为这个（我认为）：
静态 html + css 可以通过将 html 中的“class”标签映射到相关 css.我们知道浏览器在渲染时将两者结合在一起。给图片加上js，就更难搞清楚最后的html是怎么创建的了。
而且嵌套css...也很难搞清楚。
问题：
那么，我如何观看浏览器将它们全部结合在一起？
例如，如果我知道正在修改的“class”，我怎么知道修改是从哪里来的呢？ (css and/or js)
有没有办法：a) 让浏览器告诉我修改了这个 class 内容的东西，或者 b) 运行 一个“调试器” " 关注有问题的 class，看看浏览器对那个 class 的内容有何应用？
好的，我找到了找出哪个 js 正在调整这个元素的方法。
这些步骤适用于 Windows 上的 Chrome。
首先，找到元素名称。右键单击正在修改的呈现的 html 单词，然后 select 检查元素。
查看 DOM 并找到特定于此元素的 class。在这种情况下是：
class="popupover-host"
（然后我搜索整个 html 来源以确保此 class 仅特定于相关修改后的文本。）
现在，打开开发人员工具 (F12) 并按 Ctrl+Shift+F
粘贴：popupover-host
进入搜索框并运行搜索。
就我而言，我得到了三个点击：
- js（手迹没发现）
- css（我是had找的，但是没有感兴趣的修改）
- 来源html（我已经知道）
js修改：
return i.innerHTML = "*" + i.innerHTML
啊哈！现在我知道为什么渲染的 html 包含一个 * 字符，它不在源代码 html 中，也不是由 css!
完成的
我正在维护一个网站，该网站执行一些神奇的行为（好吧，它添加了一些不在 html 中的字符）到标记的元素：
class="popupover-host"
我找不到在 css 中引用它，并且到目前为止在任何 .js
中都没有看到它被引用在浏览器中，它是预呈现的，检查元素会显示完全处理的文本（例如源中的文本 html 加上添加的字符）。
我觉得我需要观察浏览器处理 html，但以前没有这样做过。
问题归结为这个（我认为）：
静态 html + css 可以通过将 html 中的“class”标签映射到相关 css.我们知道浏览器在渲染时将两者结合在一起。给图片加上js，就更难搞清楚最后的html是怎么创建的了。
而且嵌套css...也很难搞清楚。
问题：
那么，我如何观看浏览器将它们全部结合在一起？
例如，如果我知道正在修改的“class”，我怎么知道修改是从哪里来的呢？ (css and/or js)
有没有办法：a) 让浏览器告诉我修改了这个 class 内容的东西，或者 b) 运行 一个“调试器” " 关注有问题的 class，看看浏览器对那个 class 的内容有何应用？
好的，我找到了找出哪个 js 正在调整这个元素的方法。
这些步骤适用于 Windows 上的 Chrome。
首先，找到元素名称。右键单击正在修改的呈现的 html 单词，然后 select 检查元素。
查看 DOM 并找到特定于此元素的 class。在这种情况下是：
class="popupover-host"
（然后我搜索整个 html 来源以确保此 class 仅特定于相关修改后的文本。）
现在，打开开发人员工具 (F12) 并按 Ctrl+Shift+F
粘贴：popupover-host
进入搜索框并运行搜索。
就我而言，我得到了三个点击：
- js（手迹没发现）
- css（我是had找的，但是没有感兴趣的修改）
- 来源html（我已经知道）
js修改：
return i.innerHTML = "*" + i.innerHTML
啊哈！现在我知道为什么渲染的 html 包含一个 * 字符，它不在源代码 html 中，也不是由 css!
完成的