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

【问题标题】：Check what part of JavaScript code is rendering a specific Html element?检查 JavaScript 代码的哪一部分正在呈现特定的 Html 元素？
【发布时间】：2017-05-04 10:03:21
【问题描述】：

在这个页面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 元素？

【问题讨论】：

标签： javascript jquery web-scraping google-chrome-devtools screen-scraping

【解决方案1】：

我的建议是：

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

【讨论】：