Chrome瀏覽器以其簡單,、快速、安全,、穩(wěn)定,、擴(kuò)展豐富等特性受到了不少人的喜愛，除了這些特性,，Chrome瀏覽器還提供了非常簡單方便的開發(fā)人員工具,，可以為開發(fā)提高效率，加上Chrome瀏覽器對HTML5和CSS3的支持度相對比較好,，很多web新技術(shù)在Chrome瀏覽器上的呈現(xiàn)效果都很不錯,，不少web設(shè)計和開發(fā)人員對Chrome瀏覽器也情有獨(dú)鐘，不少web設(shè)計和開發(fā)人員甚至表示Chrome已經(jīng)成為他們的絕對主力瀏覽器,。

　　今天我們就來看看Chrome瀏覽器到底提供了怎樣方便好用的開發(fā)人員工具,。

　　我們在Chrome瀏覽器中打開某個頁面，選定網(wǎng)頁元素(如通欄,、文字,、圖片等)，按鼠標(biāo)右鍵,，從右鍵菜單中選擇“審查元素”,，就可以打開Chrome瀏覽器的開發(fā)人員工具，快捷鍵為“Ctrl + Shift + C ”,，也可以直接按F12,。

　　或者點(diǎn)擊Chrome瀏覽器右上角的“小扳手”按鈕，從菜單中選擇“工具”,，我們就可以從子菜單中看到“編碼”,、“查看源代碼”、“開發(fā)人員工具”,、“JavaScript控制臺”等和開發(fā)相關(guān)的一些選項,。點(diǎn)擊“開發(fā)人員工具”，也可以打開Chrome瀏覽器的開發(fā)輔助界面,。

　　 
　　左圖：按F12打開Chrome開發(fā)人員工具　　右圖：右鍵菜單打開Chrome開發(fā)人員工具

從“扳手”菜單打開Chrome開發(fā)人員工具

　　從菜單中我們可以看到和開發(fā)相關(guān)的快捷方式：

　　Ctrl + U 鍵 可以查看源代碼
　　Ctrl + Shift + I 鍵可打開開發(fā)人員工具,。
　　Ctrl + Shift + J 可打開開發(fā)人員工具并轉(zhuǎn)到“控制臺”。

　　Chrome瀏覽器的開發(fā)人員工具界面大致是下面這個樣子，開發(fā)工具窗口出現(xiàn)在瀏覽界面的下面部分,，

　　點(diǎn)擊下角的按鈕,，Chrome開發(fā)人員工具可以彈出成獨(dú)立窗口，按同樣位置按鈕會恢復(fù)成“瀏覽器+開發(fā)人員工具”的合并界面,。

　　點(diǎn)擊右下角的齒輪按鈕,，可以打開設(shè)置面板，在這里開發(fā)人員可以根據(jù)自己的開發(fā)習(xí)慣對幾個開發(fā)工具做一些設(shè)置,，比如代碼顯示方式等,。

　　在Chrome開發(fā)人員工具窗口的上半部，有幾個主要的功能按鈕,。開發(fā)者可以選擇合適的功能使用,，不同的功能窗口底部會顯示不同的輔助按鈕。下面我們分別簡要介紹它們的功能,。

　　元素(Elements)

　　以瀏覽器查看網(wǎng)頁的方式查看網(wǎng)頁的原始 HTML,、原始 CSS 樣式和文檔對象模型，并進(jìn)行實時操作,。

　　元素面板可以讓開發(fā)者在一個 DOM 樹中查看所有內(nèi)容,，并且允許您對 DOM 元素執(zhí)行檢查和即時修改。

　　元素面板有時是“查看網(wǎng)頁源代碼”更好的方式,。在元素面板內(nèi),，網(wǎng)頁的 DOM 將進(jìn)行恰當(dāng)編排,，可以輕松顯示 HTML 元素及其上級元素和下級元素,。如果一些網(wǎng)頁的代碼不太規(guī)范，查看網(wǎng)頁的結(jié)構(gòu)會非常困難,。元素面板可以解決查看網(wǎng)頁實際底層結(jié)構(gòu)方面的問題,。

　　資源(Resoures)

　　審查已載入審查頁面/可以在審查頁面中使用的資源。它可讓開發(fā)者與包含框架資源(HTML,、JavaScript,、CSS、圖片,、字體等)的框架樹,、HTML5 數(shù)據(jù)庫、本地存儲,、Cookie 和應(yīng)用程序緩存進(jìn)行交互,。

　　網(wǎng)絡(luò)(Network)

　　網(wǎng)絡(luò)面板可以讓用戶檢查通過網(wǎng)絡(luò)下載的資源。了解自己的網(wǎng)頁或應(yīng)用程序的正在從網(wǎng)絡(luò)服務(wù)器中請求哪些組件,、這些請求花費(fèi)了多長時間,、需要多少帶寬，還可以查看每個資源的 HTTP 請求和響應(yīng)標(biāo)題,。有效幫助開發(fā)者提高網(wǎng)頁的載入速度,。

　　腳本(Scripts)

　　深入查看網(wǎng)頁的 JavaScript,，可以在這里找到網(wǎng)頁所需的腳本列表和功能完整的腳本調(diào)試程序，并且可以在 JavaScript 代碼中設(shè)置斷點(diǎn)做調(diào)試,，甚至可以更改運(yùn)行中的 JavaScrip,，。

　　時間線(Timeline)

　　主要針對網(wǎng)頁應(yīng)用的時間和速度分析,，全面了解在載入網(wǎng)絡(luò)應(yīng)用程序和網(wǎng)頁時,，時間到底用在什么地方。從載入資源到解析 JavaScript,、計算樣式以及重繪,，所有事件都將繪制在時間軸上，了解瀏覽器要花費(fèi)多長時間處理 DOM 事件,、呈現(xiàn)網(wǎng)頁布局和繪制窗口等,。

　　分析(Profiles)

　　分析面板幫助開發(fā)者分析網(wǎng)絡(luò)應(yīng)用程序或網(wǎng)頁的執(zhí)行時間和內(nèi)存使用情況。分析面板包含兩種分析器：CPU 分析器 (CPU profiler) 和堆分析器 (Heap profiler),。CPU 分析器顯示在網(wǎng)頁的各個 JavaScript 函數(shù)中執(zhí)行時間花在了哪些地方,，堆分析器按網(wǎng)頁的 JavaScript 對象顯示內(nèi)存分配。這兩種分析器可以幫助開發(fā)者了解資源的使用位置,，進(jìn)一步優(yōu)化代碼,。

　　檢查(Audits)

　　這個功能主要是對網(wǎng)頁載入進(jìn)行分析。點(diǎn)擊run按鈕,，就可以開始分析頁面,，之后就可以看到分析結(jié)果，它甚至可以分析出頁面上樣式表中有哪些CSS是沒有被使用的,。這個功能對于優(yōu)化前端頁面,、加速網(wǎng)頁加載速度很有用。

　　控制臺(Console)

　　控制臺的用途非常廣泛,，可以用于檢查 DOM,、調(diào)試 JavaScript 或分析 HTML 解析錯誤。在開發(fā)人員工具狀態(tài)下,，我們隨時可以按Esc鍵快速切換到控制臺,。

　　以上我們介紹了Chrome瀏覽器內(nèi)置的開發(fā)人員工具的基本功能和界面，每種功能面板中還有一些具體的功能細(xì)節(jié),，相信web設(shè)計和開發(fā)人員都能很快上手,，這里就不贅述了。

　　我們知道Chrome瀏覽器是采用的Webkit內(nèi)核,，Chrome瀏覽器提供的開發(fā)人員工具也主要基于 WebKit 網(wǎng)絡(luò)檢查器(開放源代碼 WebKit 項目的一部分),。借助Chrome瀏覽器內(nèi)置的這些開發(fā)人員工具，Web設(shè)計和開發(fā)人員可以非常方便地深入查看、研究和調(diào)試網(wǎng)頁應(yīng)用代碼,，有效提高工作效率,。

　　Chrome瀏覽器專區(qū)：http://soft.yesky.com/chrome/