检查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":""}"

我尝试向该网址发送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面板上的devtools刷新页面_（似乎不起作用）
5. 现在，只要JavaScript修改了您设置断点的元素的后代，源面板就会暂停并允许您检查发生了什么。