Chrome 開發者工具使用詳解

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、關閉開發者工具的按鈕
• 二、選擇面板的標籤項
• 3、用戶自定義的一個第三方擴展應用-PageSpeed
• 4、能夠調整開發者工具的佈局
• 5、顯示/隱藏控制檯
• 六、點擊後可在頁面中選擇元素
• 7、頁面js報錯信息
• 八、打開/關閉設置面板

能夠根據我的習慣來調整開發者工具的位置。點擊上圖標記4的按鈕來切換開發者工具的位置，使它能夠以下圖那樣顯示：

元素面板展示瀏覽器渲染後的html結構。頁面js操做dom後的結果也會實時展示。以下截圖：

• 1、Html結構樹
• 2、三角型表示該元素有子元素。三角型的不一樣方向表示展開或摺疊
• 三、元素面包屑，從根節點開始，到選中的當前元素。鼠標滑過相應節點，頁面中會高亮相應的節點區域
• 4、可拖動的分割線，風格html結構樹和css樣式信息
• 五、可展開摺疊的模塊，包括css樣式信息和其餘
• 6、計算後的樣式板塊-展現選中元素的樣式信息
• 七、處理是否顯示元素從瀏覽器中繼承過來的樣式
• 8、顯示用戶的樣式，如頁面中引用的styles.css文件，或經過js設置的樣式，或者經過開發者工具添加的樣式
• 9、添加新規則–能夠給選擇的元素添加樣式
• 10、觸發元素狀態，能夠設置元素的狀態，如hover（用戶鼠標滑過元素的效果），actice等。截圖中對應的按鈕icon表示點擊觸發後，默認狀態是關閉的
• 11、能夠設置顏色顯示格式。能夠設置爲用戶自定義的、hex、RGB或HSL
• 十二、顯示元素的和模型

元素面板能夠查看和編輯元素和其樣式。打開開發者工具，點擊第一個標籤項,也能夠經過在頁面元素上右鍵點擊–>查看元素。有不少用途，能夠編輯或添加新元素節點；能夠查看元素樣式信息，而且能夠對樣式進行添加、刪除等操做。

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；
• 二、左側欄分類列出頁面資源。如「框架」、「session存儲」，若是前面有箭頭點擊展開還能夠看到更多信息。注意左側欄的大小是能夠調整的；
• 三、頁面資源包括字體、圖片、js、css和頁面自己。若是頁面中有frame或iframe，展開Frames會看到其對應的frame和iframe。頁面層次結構更清晰
• 四、數據庫顯示頁面相關的SQL數據庫數據信息；
• 5、相應IndexedDB 也展現頁面的IndexedDB 信息；
• 六、以鍵/值 形式列表展現本地存儲的數據；
• 7、以鍵/值列表顯示session存儲數據；
• 八、根據域名列舉cookie；
• 9、顯示經過manifest緩存的資源。包括不少信息，如js庫文件會顯示文件地址、大小和類型；
• 十、右側用來顯示每一個資源對應的詳細信息。

注意，能夠修改編輯資源信息，如編輯本地存儲的數據，來調試頁面資源。

查看頁面中框架中的內容

雖然如今由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存在了本地存儲中。廚房水槽應用中有了一些字段，以下:

3a867610-670a-11e1-a90e-4318029d18bb-http://dev.sencha.com/deploy/touch/examples/production/kitchensink/resources/css/app.css

/*45e6f4ffe818855b26f3dcbfc156025eca58e4f5*/ code , pre , pre  *{ font-family :Menlo,Monaco, Courier , monospace }

Steve Souders有一篇文章關於靜態資源的本地存儲 。在移動設備上應用本地存儲對提高性能頗有效。

緩存應用

能夠查看瀏覽緩存了哪些資源。以下圖：

 

♥ 文章轉載於 軟件盒子