javascript - 检查 JavaScript 代码的哪一部分正在呈现特定的 Html 元素？

Question

在此页上 https://detail.1688.com/offer/548835845261.html

我想抓取图片中突出显示的运费和运费。

我不知道这是如何加载到 DOM 中的。

它不包含在 DOM 中。它甚至没有通过 AJAX 调用加载。

不确定发生了什么。

我在初始页面源代码中看到的唯一相关部分是

data-unit-config="{"calculationUrl":"https://laputa.1688.com/offer/ajax/CalculateFreight.do","freightTemplateId":"10342228","beginAmount":"1","unitWeight":"1","refPrice":"88.00","isCodOffer":""}"

我尝试向该 URL 发出 GET 请求

https://laputa.1688.com/offer/ajax/CalculateFreight.do?freightTemplateId=10342228&beginAmount=1&unitWeight=1&refPrice&88.00&isCodOffer

但不是运气。

我想问有什么方法可以检查 JavaScript 代码的哪一部分正在呈现特定的 Html 元素？

Answer 1

我的建议是:

1. 当元素出现时，检查它。
2. 在 Elements 面板中，找到没有神秘起源的神秘元素的第一个祖先元素(您知道它是如何进入页面的元素)。
3. 右键单击步骤 #2 中的祖先元素并导航并选择 Break on... ==> Subtree modification
4. 使用 Elements 面板上的开发工具刷新页面(否则似乎不起作用)
5. 现在，只要 JavaScript 修改了您在其上设置断点的元素的后代，源代码面板就会暂停并允许您检查发生了什么。