檢查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請求到URL

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. 刷新頁面_with的Elements面板上的devtools（似乎沒有其他工作）
5. 現在隨時隨地的JavaScript修改元素的後裔你設置斷點，源面板將暫停並允許您檢查發生了什麼。