我知道Chrome有一个JavaScript调试器，可以在HTML中设置断点，以便在页面加载后修改任何内容，但只能在页面已经加载后才能这样做。我正在尝试找出如何在初始页面加载时为元素分配内联样式。我尝试在文件中搜索类名，但没有结果。我不确定如何跟踪此设置的位置。查看源代码没有显示任何内联样式，因此必须来自JS文件。
如何调试这个问题？
如何调试这个问题？
在页面初始化加载时，通过某个JavaScript函数调试HTML元素更改，但无法找到它。
10
- Patoshi パトシ
1个回答
14
我唯一可以建议的是：
- 在脚本 > 脚本第一条语句上设置事件监听器断点。
- 重新加载页面。DevTools会暂停在执行的第一个脚本的第一行。
- 现在，返回到元素面板，在
<body>上放置一个子树修改DOM断点。每当任何节点被修改时，DevTools都会暂停。或者，如果您的目标节点已经在HTML中声明并存在于页面上，则直接在目标节点上设置DOM断点。 - 不断按下恢复脚本执行，直到找到修改节点的代码行。每次按下恢复脚本执行时，脚本仅执行直到另一个节点被修改。
这样可以绕过DevTools限制DOM断点在页面加载时不起作用的问题，因为页面在设置DOM断点时已经开始运行。
尽管如此，这似乎是一个非常核心的用例。像您提到的单个节点上的DOM断点在页面加载时不起作用。DOM变异事件监听器断点也不起作用。我会提出一个功能请求来解决这个问题，无论采用哪种方式。
- Kayce Basques
3
太棒了，它能正常工作。你是怎么发现这个的？Chrome开发者工具中有如此多的选项，以至于有人可以专门学习它。 - Patoshi パトシ
优秀的答案 - loopmode
非常有趣的解决方案，尽管它似乎并不总是有效：我曾经遇到过一些谷歌广告将内容插入到应用了“子树修改”断点的元素中，但脚本执行并没有在那里停止（但当我自己尝试插入一个节点时确实有效）。不知道谷歌广告在那里做了什么... - schellmax
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接