Chrome Dev Tools控制檯如何訪問網站的資源？

Question

早期我使用chrome開發工具（稱爲檢查元素）進行了一些調試和測試。我發現，在開發工具的資源欄中，Chrome始終可以從服務器訪問資源並顯示它們（鏈接，視頻，圖像....）。只是想知道Chrome如何做到這一點。有什麼辦法可以編寫一段代碼來做同樣的事情（訪問其他網站的服務器資源，而不是修改它們，但顯示的東西就像當前在網站上播放的視頻鏈接，它通常不會彈出直到播放按鈕被擊中）？

Answer 1

DevTools不從站點獲取資源。它從瀏覽器中獲取它們。

有類似的問題已經

How does webkit/chrome's WebInspector Resources Inspection work?

和

Getting Information from Google Chrome's Developer Tools

Chrome開發人員工具主要有兩個部分前端（HTML + JavaScript的）和後端（C++），並有一個指定這些部分之間協議的API。你可以看到the specification here。您可以使用它來編寫自己的應用程序，而不是標準的DevTools前端。

此外，還有experimental debugging API鉻擴展。

Answer 2

我認爲Webkit WebInspector會檢查漏洞源代碼並匹配源的所有資源。

因此它匹配<link href="something.css">然後它將something.css放置在樣式表下的資源面板中。和其他標籤完全一樣。

這是不難做正則表達式。