不僅僅是瀏覽器 走近Chrome開發人員工具

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

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

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

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

　　

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

從「扳手」菜單打開Chrome開發人員工具

　　從菜單中我們可以看到和開發相關的快捷方式：

　　Ctrl + U 鍵 可以查看源代碼

　　Ctrl + Shift + I 鍵可打開開發人員工具。

　　Ctrl + Shift + J 可打開開發人員工具並轉到「控制台」。

　　Chrome瀏覽器的開發人員工具界面大致是下面這個樣子，開發工具窗口出現在瀏覽界面的下面部分，

　　點擊下角的

按鈕，Chrome開發人員工具可以彈出成獨立窗口，按同樣位置按鈕會恢復成「瀏覽器+開發人員工具」的合併界面。

　　點擊右下角的齒輪按鈕，可以打開設置面板，在這裡開發人員可以根據自己的開發習慣對幾個開發工具做一些設置，比如代碼顯示方式等。

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

　　元素(Elements)

　　以瀏覽器查看網頁的方式查看網頁的原始 HTML、原始 CSS 樣式和文檔對象模型，並進行實時操作。

　　元素麵板可以讓開發者在一個 DOM 樹中查看所有內容，並且允許您對 DOM 元素執行檢查和即時修改。

　　元素麵板有時是「查看網頁源代碼」更好的方式。在元素麵板內，網頁的 DOM 將進行恰當編排，可以輕鬆顯示 HTML 元素及其上級元素和下級元素。如果一些網頁的代碼不太規範，查看網頁的結構會非常困難。元素麵板可以解決查看網頁實際底層結構方面的問題。

　　資源(Resoures)

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

　　網路(Network)

　　網路面板可以讓用戶檢查通過網路下載的資源。了解自己的網頁或應用程序的正在從網路伺服器中請求哪些組件、這些請求花費了多長時間、需要多少帶寬，還可以查看每個資源的 HTTP 請求和響應標題。有效幫助開發者提高網頁的載入速度。

　　腳本(Scripts)

　　深入查看網頁的 JavaScript，可以在這裡找到網頁所需的腳本列表和功能完整的腳本調試程序，並且可以在 JavaScript 代碼中設置斷點做調試，甚至可以更改運行中的 JavaScrip，。

　　時間線(Timeline)

　　主要針對網頁應用的時間和速度分析，全面了解在載入網路應用程序和網頁時，時間到底用在什麼地方。從載入資源到解析 JavaScript、計算樣式以及重繪，所有事件都將繪製在時間軸上，了解瀏覽器要花費多長時間處理 DOM 事件、呈現網頁布局和繪製窗口等。

　　分析(Profiles)

　　分析面板幫助開發者分析網路應用程序或網頁的執行時間和內存使用情況。分析面板包含兩種分析器：CPU 分析器 (CPU profiler) 和堆分析器 (Heap profiler)。CPU 分析器顯示在網頁的各個 JavaScript 函數中執行時間花在了哪些地方，堆分析器按網頁的 JavaScript 對象顯示內存分配。這兩種分析器可以幫助開發者了解資源的使用位置，進一步優化代碼。

　　檢查(Audits)

　　這個功能主要是對網頁載入進行分析。點擊run按鈕，就可以開始分析頁面，之後就可以看到分析結果，它甚至可以分析出頁面上樣式表中有哪些CSS是沒有被使用的。這個功能對於優化前端頁面、加速網頁載入速度很有用。

　　控制台(Console)

　　控制台的用途非常廣泛，可以用於檢查 DOM、調試 JavaScript 或分析 HTML 解析錯誤。在開發人員工具狀態下，我們隨時可以按Esc鍵快速切換到控制台。

　　以上我們介紹了Chrome瀏覽器內置的開發人員工具的基本功能和界面，每種功能面板中還有一些具體的功能細節，相信web設計和開發人員都能很快上手，這裡就不贅述了。

　　我們知道Chrome瀏覽器是採用的Webkit內核，Chrome瀏覽器提供的開發人員工具也主要基於 WebKit 網路檢查器(開放源代碼 WebKit 項目的一部分)。藉助Chrome瀏覽器內置的這些開發人員工具，Web設計和開發人員可以非常方便地深入查看、研究和調試網頁應用代碼，有效提高工作效率。