Chrome 開發者工具 - 動態創建的元素

Question

有沒有辦法找出哪個 JS 腳本在 Chrome 的開發人員工具中創建了動態元素？ 如果我在頁面上“查看頁面源”，則該元素不存在。 我可以在 Chrome 的開發人員工具中看到該元素。 有沒有辦法具體找出哪個 JavaScript 文件以及我的 JavaScript 文件中的哪一行創建了該元素？

幫助澄清：我知道創建了哪個元素……我不知道是哪個 .js 文件創建了它，特別是該 .js 文件中的哪一行

Answer 1

更新的答案：

你在下面說過：

我知道它是哪個元素...我不知道是哪個 .js 文件創建了它，特別是該 .js 文件中的哪一行

這不是問題最初的閱讀方式。 :-)

如果您知道它是哪個元素，則有兩種選擇：

1. 您可以使用 Dev Tools 在其父元素被修改時觸發斷點：

   1. 加載頁面

   2. 打開開發工具

   3. 轉到元素面板

   4. 導航到目標元素最終將添加到的父元素

   5. 右鍵單擊父元素並單擊Break on... > Subtree Modifications

   現在，當父元素的子樹被修改時，Chrome 會觸發斷點，因此您可以看到添加元素的 JavaScript 代碼。

   不幸的是，如果在頁面的主要加載期間（例如，在解析 HTML 期間，通過立即運行而不是等待的腳本）添加元素，則不會觸發該斷點。

2. 如果元素中的任何文本似乎是特定於它的（內容、 id 、 class 、某些屬性等等），一旦頁面加載完畢，您就可以使用 Chrome 強大的搜索功能來嘗試查找該文本：

   1. 加載頁面

   2. 打開開發工具

   3. 轉到“來源”選項卡

   4. 單擊 Ctrl+Shift+F，即“在文件中查找”——它會查找與頁面關聯的所有文件，而不僅僅是“當前”文件

   5. 輸入您認為可能有助於識別添加元素的代碼的文本

   6. 按 Enter，所有匹配項將顯示在下方

   您甚至可以使用正則表達式。

---

原答案：

不，沒有簡單的方法可以區分頁面加載后通過 JavaScript 創建的元素與通過初始 HTML 解析創建的元素。

或者至少，在頁面上的任何其他 JavaScript 運行之前，必須將 JavaScript 添加到頁面中，我猜這是一個要求。

但是，如果您可以在任何其他 JavaScript 運行之前將 JavaScript 添加到頁面，那么實際上很容易做到：

Array.prototype.forEach.call(document.querySelectorAll("*"), function(element) {
    element.setAttribute("data-original", "");
});

這會用一個屬性標記頁面上的每個元素，該屬性告訴您該代碼運行時它在那里。 您可以在開發工具的元素面板中看到這些屬性。 因此，如果您看到一個沒有該屬性的元素，您就知道它是后來添加的。

document.querySelectorAll("*")是一個你可能不想在生產代碼中使用的大錘子，但在調試/開發時臨時使用，它很好。

如果以后想知道其他代碼已經創建的元素，可以在控制台中進行：

Array.prototype.forEach.call(document.querySelectorAll("*"), function(element) {
    if (element.getAttribute("data-original") === null) {
        console.log(element);
    }
});

這將輸出運行早期代碼時不在頁面上的每個元素，Chrome 的控制台非常酷——您可以右鍵單擊控制台中的元素顯示並選擇“在元素面板中顯示”以查看確切位置那個元素是。

Answer 2

您可以使用 chrome-devtools-protocol 的實驗性功能。 檢查這個， https://chromedevtools.github.io/devtools-protocol/tot/DOM/#method-getNodeStackTraces

首先，將“DOM.setNodeStackTracesEnabled”發送到 chrome dev protocl。 其次，使用“DOM.getNodeStackTraces”消息。 因此，您可以從動態創建元素中獲取調用堆棧信息。

我使用這些函數編寫了自己的程序。

圖片： https : //imgur.com/a/TtL5PtQ

這是我的項目： https : //github.com/rollrat/custom-crawler