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

成都網(wǎng)絡(luò)公司-成都網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)建站10多年經(jīng)驗成就非凡，專業(yè)從事成都網(wǎng)站建設(shè)、做網(wǎng)站，成都網(wǎng)頁設(shè)計，成都網(wǎng)頁制作，軟文營銷，廣告投放平臺等。10多年來已成功提供全面的成都網(wǎng)站建設(shè)方案，打造行業(yè)特色的成都網(wǎng)站建設(shè)案例，建站熱線：13518219792，我們期待您的來電！

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

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

查看CSS

查看元素對應(yīng)的樣式

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

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

查看外部樣式表

1、在 styles 選項卡中，單擊CSS規(guī)則旁邊的鏈接以打開定義規(guī)則的外部樣式表。可以查看樣式的源文件。

僅查看實際應(yīng)用于元素的CSS

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

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

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

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

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

查看元素偽狀態(tài)

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

添加或更改CSS樣式

添加內(nèi)聯(lián)樣式

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

2、查看效果：

向已有樣式規(guī)則添加聲明

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

修改已有樣式規(guī)則的聲明

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

給元素添加CSS類

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

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

添加新樣式規(guī)則

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

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

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

切換樣式聲明

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

更改元素尺寸

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

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

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

• 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、調(diào)色板。單擊其中一個方塊可將顏色更改為該方塊。
6、色相。
7、透明度。
8、顯示值切換器。在當前顏色的RGBA，HSLA和Hex表示之間切換。
9、調(diào)色板切換器。在“ 材質(zhì)設(shè)計”調(diào)板，自定義調(diào)色板或頁面調(diào)色板之間切換。DevTools根據(jù)它在樣式表中找到的顏色生成頁面調(diào)色板。

使用吸管從頁面上取樣

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

看完了這篇文章，相信你對chrome開發(fā)者工具如何查看css代碼有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！