chrome開發者工具如何查看css代碼

小編給大家分享一下chrome開發者工具如何查看css代碼，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

chrome開發者工具查看css代碼的方法：首先打開調試工具，并點擊調試工具左上角的檢查元素按鈕；然后在styles選項卡中，單擊CSS規則旁邊的鏈接，并打開定義規則的外部樣式表；最后查看樣式的源文件即可。

chrome devtools 是前端開發再也熟悉不過的調試工具了。那么我們究竟有多了解它，這里總結了一些常用的CSS調試操作。

查看CSS

查看元素對應的樣式

1、打開調試工具，點擊調試工具左上角的檢查元素按鈕或者快捷鍵（Ctrl/Cmd + Shift + C）

2、在頁面選中需要查看的元素，被檢查的元素在DOM樹中以藍色背景突出顯示，樣式在右側 styles 選項卡區域內。

查看外部樣式表

1、在 styles 選項卡中，單擊CSS規則旁邊的鏈接以打開定義規則的外部樣式表?？梢圆榭礃邮降脑次募?。

僅查看實際應用于元素的CSS

1、styles 選項卡中會顯示適用于元素的所有規則，包括已被覆蓋的聲明，如果對覆蓋的聲明不感興趣，可以點擊與 styles 相鄰的 computed 選項卡，僅查看實際應用于元素的CSS規則。

2、其中繼承的屬性是不透明的。選中 Show All 復選框可以查看所有繼承的值。

3、注意屬性的顯示是按照字母順序排列的。

4、Filter 過濾器可以按照查詢規則搜索符合規則的樣式。

5、當鼠標懸浮在某一行屬性上時，會出現一個圓形箭頭按鈕，點擊可以跳轉到styles 選項卡所對應的樣式處。

查看元素偽狀態

1、在 styles 選項卡中點擊 :hov 。以 :hover 為例，選中 :hover 復選框，如果
被檢查的元素添加了 :hover 樣式，在樣式列表中就會顯示此條樣式。并且頁面效果不用鼠標懸浮也會觸發顯示效果。

添加或更改CSS樣式

添加內聯樣式

1、相當于向HTML的 style 屬性的添加屬性值。點擊 element.style 頂部附近區域，輸入新添加的樣式屬性名，按 Tab 鍵，再輸入樣式屬性值，并按 Enter 鍵。這樣就添加了一條內聯樣式。

2、查看效果：

向已有樣式規則添加聲明

1、單擊要添加聲明的樣式規則的括號之間。出現光標，輸入屬性名，按 tab 鍵，輸入屬性值，回車。

修改已有樣式規則的聲明

1、在需要更改的原有樣式上雙擊，修改樣式規則，并按 Enter 鍵。

給元素添加CSS類

1、在 styles 選項卡中點擊 .cls 。會顯示一個 Add new class 的輸入框，你可以輸入你想要添加的類名，然后按 Enter 鍵。

2、點擊 title 前方的復選框可以來回切換樣式。

添加新樣式規則

1、單擊 styles 選項卡右上角的加號1?，DevTools會在 element.style 規則下插入一條新規則。

2、如果想在特定位置添加新樣式規則，可以鼠標懸浮在插入規則的上一個樣式規則處，此時會在右下角出現三個點更多操作的符號，x懸浮上去就會出現加號2?，點擊加號2就會在此條樣式的后面新增一條樣式規則。

3、這里的更多操作還有其他一些功能，從左往右依次是 文字陰影、盒子陰影、文字顏色、背景顏色。

切換樣式聲明

1、點擊樣式聲明前的復選框就可以切換樣式聲明

更改元素尺寸

1、在 styles 選項卡的框模型圖中，將鼠標懸浮在需要編輯的區域，雙擊，填入需要修改的數值，回車。盒模型的默認單位為像素，輸入百分比也會轉成像素值。

使用鍵盤快捷鍵更改聲明值

編輯聲明的值時，可以使用以下鍵盤快捷鍵將值遞增固定量：

• Up 將值更改為1，如果當前值介于-1和1之間，則更改0.1。
• Option+ Up（Mac）或Alt+ Up （Windows，Linux）增加0.1。
• Shift+ Up增加10。
• Shift+ Command+ Up（Mac）或 Shift+ Page Up（Windows，Linux）將值增加100。

減量也有效。只需將Up上面提到的每個實例替換為Down。

使用Coverage選項卡查看已使用和未使用的CSS

1、按下Command+ Shift+ P（Mac）或 Control+ Shift+ P（Windows，Linux，Chrome OS），而DevTools則處于焦點以打開命令菜單。
2、開始輸入coverage并選擇Show Coverage。將顯示 coverage 選項卡。

3、單擊“to reload and start capturing coverage” 開始檢測覆蓋范圍并重新加載頁面。頁面重新加載，Coverage選項卡提供瀏覽器加載的每個文件使用多少CSS（和JavaScript）的概述。綠色代表使用CSS。紅色表示未使用的CSS。

4、單擊一個CSS文件，查看它使用的CSS的逐行細分。

拾色器的使用

面板說明

以下是拾色器的每個UI元素的說明：
1、陰影。
2、吸管。
3、復制到剪貼板。將顯示值復制到剪貼板。
4、顯示價值。RGBA，HSLA或Hex的顏色表示。
5、調色板。單擊其中一個方塊可將顏色更改為該方塊。
6、色相。
7、透明度。
8、顯示值切換器。在當前顏色的RGBA，HSLA和Hex表示之間切換。
9、調色板切換器。在“ 材質設計”調板，自定義調色板或頁面調色板之間切換。DevTools根據它在樣式表中找到的顏色生成頁面調色板。

使用吸管從頁面上取樣

打開拾色器時，默認情況下吸管 滴管處于打開狀態。要將所選顏色更改為頁面上的其他顏色：
1、將鼠標懸停在視口中的目標顏色上。
2、點擊確認。

看完了這篇文章，相信你對chrome開發者工具如何查看css代碼有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！