Chrome Web 開發者工具頁面結構與樣式
瀏覽器開發者工具的使用是Web前端開發工程師必須要掌握技能。本文介紹的是chrome自帶的開發者工具，首先從頁面的結構和樣式來介紹。本文的目的是介紹chrome開發者工具的基礎用法。或許你用別的工具，如firebug或IE的開發者工具，但本文介紹的功能，其他對應工具上應該也有相應的功能，可以幫助你了解對比。
瀏覽器開發者工具功能：
- 查看元素的html結構
- 概覽頁面的css，以及某一元素的樣式
- 實時編輯css來調樣式
- 查看http請求
- 頁面中運行js
- 檢測頁面性能瓶頸，做性能評估
- 查看頁面在本地存儲的數據
瀏覽器開發者工具
在開始講解chrome的開發者工具前，先簡單列舉一下目前主流瀏覽器提供的開發者工具。
chrome 瀏覽器開發者工具
Chrome、chrome canary和chromium都帶有該工具。
safari 瀏覽器開發者工具
safari是采用Web Inspector 庫。它的更新沒有chrome頻繁。
- 下載地址：apple.com/safari/
- 打開方式，快捷鍵：ctrl + alt + i，或者選擇菜單“工具”->“顯示web檢查器”
- 參考文檔：developer.apple.com/library/safari/documentation
- 注意：也可以在頁面想要查看的元素上，右鍵點擊->查看元素 打開
firefox 瀏覽器開發者工具
Firefox現在也自帶了開發者工具，它的元素定位效果很好。firebug，任然可以以插件的形式安裝。
IE 瀏覽器開發者工具
- 下載地址：microsoft.com/ie
- 打開快捷鍵：F12
- 參考文檔：msdn.microsoft.com/en-us/library/dd565628
- 注意：安裝 chrome frame，chrome的瀏覽器開發者工具在IE下也可用
opera瀏覽器開發者工具-dragonfly
- 下載地址：opera.com/browser/
- 打開快捷鍵：ctrl + shift + i
- 參考文檔：opera.com/dragonfly/documentation/
- 注意：dragonfly是opera瀏覽器的一部分
注意，本教程中是以chrome canary，所以介紹的一些特性在beta和穩定版中可能沒有。
在開始介紹元素面板前，先介紹一下頭部和底部的一些功能。
上圖標記點介紹：
- 1、關閉開發者工具的按鈕
- 2、選擇面板的標簽項
- 3、用戶自定義的一個第三方擴展應用-PageSpeed
- 4、可以調整開發者工具的布局
- 5、顯示/隱藏控制台
- 6、點擊后可在頁面中選擇元素
- 7、頁面js報錯信息
- 8、打開/關閉設置面板
可以根據個人習慣來調整開發者工具的位置。點擊上圖標記4的按鈕來切換開發者工具的位置，使它可以如下圖那樣顯示：
元素面板展現瀏覽器渲染后的html結構。頁面js操作dom后的結果也會實時展現。如下截圖：
- 1、Html結構樹
- 2、三角型表示該元素有子元素。三角型的不同方向表示展開或折疊
- 3、元素面包屑，從根節點開始，到選中的當前元素。鼠標滑過相應節點，頁面中會高亮相應的節點區域
- 4、可拖動的分割線，風格html結構樹和css樣式信息
- 5、可展開折疊的模塊，包括css樣式信息和其他
- 6、計算后的樣式板塊-展示選中元素的樣式信息
- 7、處理是否顯示元素從瀏覽器中繼承過來的樣式
- 8、顯示用戶的樣式，如頁面中引用的styles.css文件，或通過js設置的樣式，或者通過開發者工具添加的樣式
- 9、添加新規則–可以給選擇的元素添加樣式
- 10、觸發元素狀態，可以設置元素的狀態，如hover（用戶鼠標滑過元素的效果），actice等。截圖中對應的按鈕icon表示點擊觸發后，默認狀態是關閉的
- 11、可以設置顏色顯示格式。可以設置為用戶自定義的、hex、RGB或HSL
- 12、顯示元素的和模型
元素面板可以查看和編輯元素和其樣式。打開開發者工具，點擊第一個標簽項,也可以通過在頁面元素上右鍵點擊–>查看元素。有很多用途，可以編輯或添加新元素節點；可以查看元素樣式信息，並且可以對樣式進行添加、刪除等操作。
DOM 編輯
在元素面板中編輯dom很簡單。刪除節點只需簡單郵件點擊節點 選擇 “刪除節點”。刪除父節點，子節點也會被刪除。小提示：也可以通過鍵盤的 delete鍵 刪除選擇的節點。
雙擊節點可以修改節點的類型。如下圖，修改p節點。事實上，修改節點的開始標簽類型，其對應的閉合標簽類型也會同時改變。
添加屬性添加屬性，右鍵點擊元素選擇“添加屬性”。光標焦點放到你想要添加屬性的元素上，然后輸入你想要添加的屬性。例如，添加class=“title”。通過鍵盤的tab鍵可以切換到下一個屬性進行編輯。
編輯屬性編輯屬性和添加屬性一樣，在想要編輯的屬性或屬性值上雙擊即可編輯。修改輸入框中會高亮你雙擊的屬性或屬性值。
編輯HTML編輯html只需要選擇相應節點右鍵點擊 選擇“編輯HTML”。
開發者工具提供了很好的頁面元素定位功能。在元素面板中鼠標滑過瀏覽器渲染的html結構樹時，頁面中對應的的元素區域會高亮顯示。這非常方便於在html結構樹上定位頁面元素。
當然如果鼠標滑過的節點對應在頁面中的區域不在瀏覽器的可視區域中就看不到高亮了。但這中情況下頁面會在元素相應的方位上顯示一個提示框。也可以右鍵點擊元素，選擇“滾動到可視區域”，則對應元素區域會滾動到瀏覽器的可視區域中。
開發者工具還有搜索功能。當工具面板獲得焦點后，快捷鍵ctrl+f會打開搜索框。如在輸入框中輸入“body”就會快速找到頁面中的第一個body。
查看樣式信息
在介紹元素面板右側的樣式面板前，先給一個元素同時設置margin、padding和border，在鼠標滑過該元素時你會看到如下的盒模型。
如果發現有浮動元素顯示的和模型有問題，可以通過樣式面板區域的“盒模型”模塊來查看元素的margin、padding、border 。如果沒有學習或了解css盒模型，那么它是一個學習盒模型的好幫手。
它告訴你元素是怎么渲染的，找到問題的原因。
該面板可以查看元素尺寸、padding、border和margin的值，單位是px。鼠標滑過各個區域時頁面中會高亮顯示相應的區域。
設置樣式信息
如下圖展開樣式面板。在空白處點擊，光標會自動定位到輸入框開始設置樣式。輸入屬性名，按tab鍵就會自動聚焦到屬性值的輸入框，然后輸入想要的值。
border
:
1px
solidgreen
|
在編輯樣式屬性名或屬性值值時，輸入有自動完成功能，可以通過tab鍵或鍵盤向右箭頭來補全你所選擇的。當輸入的屬性值單位為px或百分比時，可以通過鍵盤的向上、向下鍵來增加和減小數值，還可以通過組合鍵shift+向上/向下鍵以10倍的值增加或減小。
編輯顏色值時，可以直接輸入顏色值，也可以通過點擊顏色小方塊彈出的取色面板來選擇顏色。還可以按shift點擊顏色小方塊來切換顏色值的模式。
可以通過點擊+號icon來給某個元素添加樣式，例如元素如下：
<
h1
id
=
"something"
>Hello</
h1
>
|
點擊+號icon后會自動添加一條規則如下：
#something { }
|
如果html如下：
<
h1
class
=
"some-class"
>Hello</
h1
>
|
那么所對應的規則如下：
.some-class { }
|
若html結構如下：
<
h1
>Hello</
h1
>
|
則會增加如下一條：
.h
1
{ }
|
那如果元素有多個class如下：
<
h1
class
=
"class1 class2 class3"
>Hi there</
h1
>
|
會生成一條如下：
.class
1
.class
2
.class
3
{ }
|
這些生成的規則也可以編輯。
資源面板展示了頁面中的所有資源。下圖是資源面板截圖：
- 1、資源面板tab；
- 2、左側欄分類列出頁面資源。如“框架”、“session存儲”，如果前面有箭頭點擊展開還可以看到更多信息。注意左側欄的大小是可以調整的；
- 3、頁面資源包括字體、圖片、js、css和頁面本身。如果頁面中有frame或iframe，展開Frames會看到其對應的frame和iframe。頁面層次結構更清晰
- 4、數據庫顯示頁面相關的SQL數據庫數據信息；
- 5、相應IndexedDB 也展示頁面的IndexedDB 信息；
- 6、以鍵/值 形式列表展示本地存儲的數據；
- 7、以鍵/值列表顯示session存儲數據；
- 8、根據域名列舉cookie；
- 9、顯示通過manifest緩存的資源。包括很多信息，如js庫文件會顯示文件地址、大小和類型；
- 10、右側用來顯示每個資源對應的詳細信息。
注意，可以修改編輯資源信息，如編輯本地存儲的數據，來調試頁面資源。
查看頁面中框架中的內容
雖然現在由frame組成的頁面越來越少見了，但查看框架內容的方法還是有必要了解的。下面截圖，是一個由frame組成的頁面。
每個frame都相關的資源都在一個文件夾下，同樣點擊展開可以了解頁面的資源、js、css、圖片文件和字體情況。點擊選中一個框架，頁面中其對應的區域會高亮顯示。
注意：不會列出系統已有的，如“arial”“Helvetica”等，只會列出瀏覽器需要下載安裝的
如上圖，對應的字體會顯示在右側，字體大小會根據右側區域大小來調整大小。
如上圖，對應圖片會在右側顯示，圖片大小也會根據右側區域大小來自適應。如果圖片有透明，透明部分會顯示成棋盤格子來表示透明。圖片信息，如圖片大小、文件大小和圖片格式會在圖片下面顯示。
點擊腳本文件，文件內容會如實顯示在右側。
如上圖，格式難以閱讀，后續教程會詳細介紹如何查看格式化后的js代碼。
可以查看頁面加載的所有css文件。同查看js文件方法一樣。但通常不會從這里來查看樣式。如下圖：
加載失敗的資源
偶爾，瀏覽器下載資源失敗或者代碼出錯
如上圖，出錯的資源右側會顯示一個紅色標記，數字表示出錯的個數，點擊資源，右側會顯示出錯信息。
保存和查看資源
右鍵點擊資源會出現菜單，如下圖:
可以選擇保存該資源，也可以選擇在新標簽頁中查看，當然也還可以做些別的。雙擊資源會在新標簽頁中打開資源。
cookies
查看某個網站的cookie信息。如圖，訪問twitter，然后通過資源面板查看cookie信息。
- [name]-字段名。如字段名為“remember_checked”,其值為1，這可能說明用戶在登陸的時候選擇了記住我；
- [value]-字段所對應的值。如“_twitter_sess”所對應的值為一串加密了的session ID；
- [domain]-cookie所在的域。上圖的“.twitter.com”表明其子域也是可以訪問該cookie的；
- [path]-跟域相同，設置有效的路徑。設置為“/”表明允許所在路徑下都可以訪問cookie；
- [expires]-瀏覽器可以刪除該cookie的日期；
- [size]-cookie的大小，單位bytes；
- [HTTP]-cookie的訪問允許HTTP協議。這可以防止跨站js獲取cookie攻擊；
- [secure]]-只允許加密連接訪問cookie，如HTTPS；
可以通過右鍵菜單，選擇“刪除”來刪除所選cookie。下圖是查看本地存儲信息的截圖:
當用戶第一次訪問該頁面時，瀏覽器會下載css文件。再次刷新該頁面感覺快了些，因為它將css存在了本地存儲中。廚房水槽應用中有了一些字段，如下:
|
/*45e6f4ffe818855b26f3dcbfc156025eca58e4f5*/
code
,
pre
,
pre
*{
font-family
:Menlo,Monaco,
Courier
,
monospace
}
|
Steve Souders有一篇文章關於靜態資源的本地存儲 。在移動設備上應用本地存儲對提升性能很有效。
緩存應用
可以查看瀏覽緩存了哪些資源。如下圖：
♥ 文章轉載於 軟件盒子