檢查 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面板上的 devtools 刷新頁面（否則似乎不起作用）
5. 現在，無論何時 JavaScript 修改您設置斷點的元素的后代，源面板都會暫停並允許您檢查正在發生的事情。