Question

即页面上有许多缩小的脚本和iframe，我想找到脚本的确切部分，该部分负责HTML元素的外观。

它只是页面正文中的<div style="height:120px;"></div>元素，一段时间后会动态显示。

这就是为什么我不能仅使用Chrome开发工具在elements标签中为其设置断点。

如果我在此元素出现后设置断点，则此断点将在页面重新加载后丢失。

如果在一段时间后出现并且我无法在其上设置断点，该如何定义什么脚本以及脚本的哪一部分在页面上创建此微小的DOM元素？

Answer 1

使用Chrome中的“效果”标签并运行简短的性能记录。然后放大并寻找DOM元素在瀑布中发生变化的点。单击瀑布中的该标记，它将告诉您DOM元素更改时调用了什么方法。通过在脚本中搜索函数调用，您应该能够从那里追溯它。

Answer 2

如果元素随时间变化，则它可能具有关联的事件-要进行检查，可以打开chrome“开发者工具”并单击“事件监听器”，然后选择元素以查看绑定到它的内容。您也可以单击“计算”，然后单击不同的元素以查看更改了哪些内容。

Answer 3

例如，如果您的页面看起来像这样：

...
<body>
  <main>
    ...
    <div style="height:120px;"></div>
  </main>
</body>

您将要在<main>上设置子树修改断点。每当<main>的子节点被修改时（例如您要添加的节点），DevTools都会在导致修改的JS行上暂停。