準備工做 瀏覽器
要開始使用開發人員工具,請先下載 Google Chrome 瀏覽器。在瀏覽器安裝完成後,您能夠打開本身感興趣的網頁或網絡應用程序,而後經過下面任何一種方式進入開發人員工具: 性能優化
l 點擊位於瀏覽器用戶界面右上角的「頁面」下拉菜單 服務器
l 右鍵點擊網頁上的任一元素,在彈出菜單中選擇「審查元素」。 網絡
l 在 Windows操做系統上,使用 Ctrl+Shift+I 快捷鍵打開開發人員工具(或使用 Ctrl+Shift+J 直接進入 JavaScript 控制檯)。 函數
如今您應該已經看到開發人員工具的窗口了吧?在窗口的最上方的工具欄裏排列着 8 個圖標,分別對應不一樣的功能,每個圖標點擊後都會打開相應的調試面板,幫助您獲取各類不一樣的信息,如 DOM 樹、資源佔用狀況、頁面相關的腳本等。經過 Ctrl+[ 和 Ctrl+] 鍵,能夠在這些項之間進行切換。工具欄最右方還提供了一個搜索框,方便在當前面板中進行搜索。 工具
工具窗口下部的按鈕可讓調試窗口停靠到主窗口內,切換 JavaScript 控制檯狀態,以及其它一些功能。固然您也可使用 Esc 鍵來更快地切換 JavaScript 控制檯狀態。直接點擊控制檯圖標會使控制檯調試界面會佔據了整個開發工具窗口。窗口右下角顯示的是錯誤和警告計數,點擊它們也會打開控制檯。 佈局
接下來的單元,讓咱們一塊兒來一塊兒分解這些圖標所對應面板具備的強大功能吧! 性能
1. 元素(Elements)面板 開發工具
在元素(Elements)面板中,能夠看到整個頁面的 DOM 樹結構和每一個元素的全部屬性,同時也能夠實時地修改這些元素及其屬性,並能夠實時看到修改後的效果。咱們這裏以 Google 簡體中文首頁爲例,鼠標右鍵單擊「 Google 搜索」 按鈕,選擇「審查元素」,您會看到以下的窗口界面(注:此處使用的內嵌工具窗口模式,如您的工具窗口爲獨立窗口模式,可經過點擊窗口左下方的「停靠」 圖標 將其變爲內嵌模式): 優化
在工具窗口右側,顯示的是被選元素的樣式信息,若有興趣,能夠嘗試經過雙擊現有屬性來修改該元素的 style 屬性或應用的某個選擇器中的屬性值,也能夠經過取消勾選的方式去掉一些屬性,同時觀察頁面的實時變化。那怎樣給現有的元素或者選擇器增長一個屬性值呢?不用着急,鼠標雙擊您所想修改的元素的 element.style 部分或者它應用的選擇器的空白部分(以下圖所示),便可添加屬性。須要注意的是,添加任何屬性都必須以分號結束。
拖動工具窗口最右側的滾動條,在展開的 Styles 模塊下方還有 Metrics、Properties、Event Listeners 幾大模塊。Metrics 模塊以圖形方式展現出左側面板中選中元素的盒模型並標出了各部分的詳細數值,在調試頁面佈局問題時,這樣的展現方式每每更直觀、更清晰。
向上拖動工具窗口中部的滾動條,找到「圖片」元素,點擊後,可看到在頁面上相應的元素被選中,這時咱們將工具窗口右側的滾動條拖到最下方,展開 Event Listeners 中個各項,可看到這個連接(元素)的相關事件監聽函數。經過 Event Listeners 項右側的「齒輪」圖標,您能夠選擇是隻顯示選中節點上的註冊的事件,仍是顯示整個事件流中全部註冊的事件。
點擊工具窗口左下角的放大鏡圖標 可進入「審查模式」,選中後,放大鏡變爲藍色,這時隨鼠標在主窗口的頁面中的移動,你會看到相應的元素被高亮標識出來,點擊後,工具窗口會顯示選中元素的 DOM 節點信息。另外值得注意的一點是,在 Google Chrome 瀏覽器開發人員工具裏,全部腳本和樣式表是按語法着色的,調試起來更加清晰。
2. 資源(Resources)面板
在資源面板中,能夠查看到請求的資源狀況,包括CSS、JS、圖片等內容,同時還能夠查看到存儲相關的如Cookies、HTML5的Database和LocalStore等,你能夠對存儲的內容編輯和刪除。
3. 網絡(NetWork)面板
網絡標籤頁對於分析網站請求的網絡狀況、查看某一請求的請求頭和響應頭還有響應內容頗有用,特別是在查看Ajax類請求的時候,很是有幫助。
每一個水平的棒狀圖示表明一個資源佔用網絡的時間,而在每一個棒狀圖示的左側顏色較淺的部分表明延遲時間(Latency),即從向服務器發出請求到服務器第一次響應之間的時長。鼠標移至棒狀圖示上,可看到每一個部分所花銷的精確時間。圖中藍色和紅色的兩條垂直線分別表明 DOMContent 加載完成和 Load 事件被觸發的時間點。
4. 腳本(Scripts)面板
在腳本面板裏,您能夠方便的調試 JavaScript 代碼。下面的圖中標註了在腳本面板裏的幾個主要功能:
① 單步調試,不進入函數體內部
② 單步調試,進入函數體內部
③ 跳出當前函數
設置斷點後按 F5 刷新,頁面會在執行到斷點語句處停下,您能夠在右側添加所需觀察的變量,來進行跟蹤變量值的變化,也可查看堆棧調用狀況及全局變量和函數的信息,也能夠將鼠標移到感興趣的變量名上直接查看此變量當前的值。
5. 時間軸(Timeline)面板
時間軸面板爲您的網頁及網絡應用程序作了一個詳細的性能分析,告訴您載入頁面的時間究竟花在哪些地方。從加載資源到解析 JavaScript 腳本、計算樣式表及頁面渲染的全部步驟,您均可以在這裏看到它們消耗的時間和內存。打開時間軸面板,您會看到這樣的界面:
6. 剖析(Profiles)面板
剖析面板由CPU 分析器和堆分析器組成,它可以幫助您瞭解網頁和網絡應用程序的執行時間和內存使用狀況。
l CPU 分析器顯示的是 JavaScript 腳本里的每一個函數分別佔用了多少執行時間
l 堆分析器顯示每一個 JavaScript 對象所使用的內存大小
7. 審計(Audits)面板
審計面板是在 Google Chrome 瀏覽器 5.0 中新引入的模塊。它能夠幫助您檢查網頁性能和網絡利用率。打開審計面板,您將看到這樣的界面:
您可選擇所需檢測的項目或選擇「檢查所有」(「 Select All 」),而後點擊「運行」(「 Run 」)按鈕,開發人員工具將爲您的網頁生成一份詳細的審計報告並給出關於網絡利用及性能優化方面的建議。
8. JavaScript 控制檯(Console)
JavaScript 控制檯可與其它面板聯合使用,您能夠藉助它來審查 DOM 元素、調試 JavaScript 代碼、查看 HTML 解析錯誤等。