如何查看Google Chrome瀏覽器中加載的.css文件？

如何查看在Google Chrome頁面中加載的.css文件？我可以看到.js（腳本），但不是.css如何查看Google Chrome瀏覽器中加載的.css文件？

2010-10-14 ziiweb

這在開發工具 - >資源 - >樣式表中可用（您可能需要打開會話的資源跟蹤），但這可能是一個超級用戶類型的問題。 – 2010-10-14 18:14:23

它在某些情況下不起作用 – 2013-05-06 02:59:07

我才能看到哪些文件已加載右鍵點擊頁面上的空白部分，並選擇查看頁面源代碼。從這裏開始，它會顯示Chrome瀏覽器呈現的HTML頁面。如果你看看標題部分，你應該列出所有被調用的外部文件，並且它們應該是超鏈接，只需點擊其中的任何一個，Chrome就會在新標籤中顯示該特定文件。

祝你好運。

來源

2010-10-14 18:16:40 Chris

警告：這個答案現在已過時！對於Chrome的最新版本，請查看Dr1Ku的答案。

在Chrome的開發者工具選項卡（CTRL + SHIFT + I），去資源（您可能必須使資源在該網頁上跟蹤），然後單擊子選項卡樣式上。這將顯示該頁面加載的所有CSS文件。

來源

2010-10-14 18:16:48 dsetton

我認爲這個答案可能已過時。我在Chrome 55中嘗試了這一點，但沒有看到任何資源部分。 – 2016-12-17 00:16:29

@EliasZamaria它已經過時了。檢查Dr1Ku的答案。 – anonymous2 2017-02-07 12:52:12

該Resources選項卡is gone as of Jan 2011，使用Network選項卡和篩選CSS請求。

原來的答覆（2010）

您可以使用任何項目「檢查元素」（右鍵），然後選擇「資源」選項卡，單擊「啓用資源，這個會話跟蹤」。然後從「子標籤」（所有，文件，圖像，腳本）等你可以點擊「樣式表」。

希望這會有所幫助！

來源

2010-10-14 18:16:52 Dr1Ku

資源選項卡在哪裏？ – Pacerier 2016-12-30 23:44:41

現在，沒有'Resources'選項卡了，只需使用'Network'選項卡並過濾'CSS'即可。您也可以查看源文件樹，但必須通過各種子域並手動/可視地過濾'.css'文件。 – Dr1Ku 2017-01-02 06:13:00

右鍵單擊頁面上的任意位置，然後選擇Inspect element。在那裏，您需要點擊Resources標籤，並告訴Chrome瀏覽器是應該始終啓用該面板還是隻應用一次該會話（根據您的喜好選擇）。一旦進入，您將看到左側的所有文件。您可以點擊右側Headers旁邊的微小Content標籤查看內容。

來源

2010-10-14 18:17:10

如果你有興趣，有一種方法來尋找他們在JS：

（請使用最新的瀏覽器）2018

var sts = document.styleSheets; 
var result = []; 
for (var i = 0; i < sts.length; i++) { 
    var st = sts.item(i); 
    result.push(st.href.match(/\w*\.css/)); 
} 
console.dir(result);

來源

2013-10-24 13:51:00 Jorgeblom

月

要查看CSS文件加載在頁面上：

轉到網絡選項卡
通過CSS

刷新頁面

篩選我知道這是一個老問題，但大多數的答案是過時的。

來源

2018-01-03 12:36:54 derloopkat

如何查看Google Chrome瀏覽器中加載的.css文件？

回答

相關問題