小編給大家分享一下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)頁制作，軟文營銷，1元廣告等。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樹中以藍(lán)色背景突出顯示，樣式在右側(cè)styles 選項卡區(qū)域內(nèi)。

查看外部樣式表

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

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

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

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

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

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

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

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

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

添加或更改CSS樣式

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

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

2、查看效果：

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

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

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

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

給元素添加CSS類

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

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

添加新樣式規(guī)則

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

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

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

切換樣式聲明

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

更改元素尺寸

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

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

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

• Up 將值更改為1，如果當(dāng)前值介于-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的逐行細(xì)分。

拾色器的使用

面板說明

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

使用吸管從頁面上取樣

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

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

新聞名稱：chrome開發(fā)者工具如何查看css代碼-創(chuàng)新互聯(lián)
當(dāng)前鏈接：http://weahome.cn/article/djdgdd.html