Chrome開發人員工具 - 動態創建元素

Question

有沒有辦法找出哪個JS腳本在Chrome的開發人員工具中創建了一個動態元素？如果我在頁面上查看「頁面源代碼」，則該元素不在那裏。我可以在Chrome的開發者工具中看到這個元素。有沒有一種方法來明確哪個JavaScript文件和我的JavaScript文件中的哪一行創建了該元素？

爲了幫助澄清：我知道創建哪些元素？我不知道是.js文件創建，並具體是什麼線在.js文件

Answer 1

更新答案：

下面你說過：

我知道這是哪個元素......我不知道是.js文件創建，並具體是什麼線在.js文件

這不是最初的問題。 :-)

如果你知道它是哪個元素，給你兩個選擇：

1. 您可以使用開發工具來觸發一個斷點，當它的父元素被修改：

   1. 加載頁面

   2. 開放開發工具

   3. 圍棋在元素面板

   4. 導航到目標元素最終會被添加到

   5. 右鍵單擊父元素，並點擊...>子樹修改歇

   父元素

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

   Unfortuantely，它不會大火，（即立即運行，而不是等待例如，在HTML的解析過程中，通過腳本）如果頁面的主加載過程中添加的元素斷點。

2. 如果有中的元素，似乎具體到它（的內容，id，class，一些屬性，等等），一旦加載頁面，你可以使用Chrome的強大搜索功能，試圖找到該文本的任何文本：

   1. 加載頁面

   2. 開放開發工具

   3. 轉到源選項卡

   4. 點擊按Ctrl + Shift + F，這是「在文件中查找」   —它會在所有的頁面關聯的文件，而不僅僅是「當前」文件

   5. 類型，你認爲可能的文本幫助您識別代碼添加元素

   6. 按Enter鍵，所有的比賽將被顯示在以下

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

---

原來的答覆：

沒有，有沒有簡單的方法來區分通過JavaScript從最初的HTML解析創建者創建的頁面加載後的元素。

或者至少，有沒有沒有向頁面運行前頁面上的任何其他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的控制檯真的很酷  —您可以右鍵單擊控制檯中的元素顯示並選擇「在元素面板中顯示」以精確查看元素的位置。