[TOC] ## 前言 本文中將詳細介紹一些chrome的開發技巧，也許你已經知道了，也許你還不是特別清楚，不妨都看一下，分分鐘提高你的開發效果與調試效率。 ## 面板介紹 一般我們通過f12或者右鍵菜單可以打開開發者工具，也可以通過頁面右鍵菜單審查打開這個界面。 這個界面主要由element元素，console控制臺，source資源,network網絡，performance表現,memory記憶，application應用，security安全，audits審計組成。另外該菜單還包括一個選擇元素的箭頭，手機模擬器，設置菜單，關閉按鈕等。 下面分別介紹這幾個面板的主要作用，歡迎大家進行積極的補充。  ## 選擇元素，elements視圖 你可以通過鼠標右鍵選擇元素，也可以用箭頭指引到需要的元素。從個人使用經驗來講，我一般是選擇到元素的大概位置然后點擊審查，這樣比較快，因為點擊到箭頭再移動到元素需要兩步。  在這個視圖中你可以進行的操作：  * **查看整體頁面的dom結構**，可以根據需要展開或者折疊任意的結構，也可以刪除或者隱藏，甚至可以編輯或者復制某dom元素，該功能用來分析dom結構是否正確，也可以用來判斷分析某些特殊情況下你的樣式以及結構是否仍然正確。 * **修改偽類狀態**：針對任何一個元素可以人為添加某狀態，包括focus,active,hover等，這個方法針對某些某些鼠標覆蓋才能顯示的dom非常方便。 * **查看某dom元素的樣式**，包括其繼承樣式以及元素樣式，并且會在最底部展示其盒模型。如果你希望更快的查看其生效樣式或者快速的查看盒模型，可以點擊右邊的tab，綜合樣式。其中，如果你可以快速的復制某部分樣式或者定位到這部分樣式的代碼來源那個文件的哪一行，方便快速定位。  * 如果你的代碼是壓縮的，可以通過格式化快速解壓  ## console控制臺 ## source資源 ## network網絡 ## performance表現, ## memory記憶 ## application應用 ## security安全 ## audits審計 ## 參考文檔 * [chrome開發者工具使用詳解](http://blog.csdn.net/u014686180/article/details/45844251) * [chrome的開發使用](http://blog.csdn.net/csdnligao/article/details/53925094)