作為前端工程師，也許你對chrome開發工具不陌生，但也談不上對各個子產品有深入了解。
本文主要是為chrome開發工具使用這個系列做個開篇。
參考資料：
谷歌開發者： https://developers.google.com/web/tools/chrome-devtools
極客官網：http://wiki.jikexueyuan.com/project/chrome-devtools/tips-and-tricks.html
chrome 系列
Chrome開發者工具不完全指南（一、基礎功能篇）
Chrome開發者工具不完全指南（二、進階篇）
Chrome開發者工具不完全指南：（三、性能篇）
Chrome開發者工具不完全指南（四、性能進階篇）
Chrome開發者工具不完全指南（五、移動篇）
Chrome開發者工具不完全指南（六、插件篇）
打開方式快捷鍵：ctrl+shift+I或F12
chrome九大面闆：elements、console、 sources 、network、 timeline 、profiles、resources、audits、security（新增）
1、elements 面闆：—— 審查元素
允許我們從浏覽器的角度看頁面，可以檢視chrome渲染頁面所需要的的HTML、CSS和DOM(Document Object Model)對象，并提供實時編輯儲存顯示功能。
在Element中主要分兩塊大的部分：HTML結構窗格和DOM樣式、布局計算結果、事件監聽、結構窗格
2、console面闆:—— 記錄輸出診斷資訊
顯示各種警告與錯誤資訊，并且提供了shell用來和文檔、開發者工具互動。使用控制台程式設計接口提供的方法來記錄診斷資訊。如 console.log()或console.profile() 。
3、 source —— javascript調試
主要作為js調試，幫助開發者快速發現問題的原因和并找出有效的解決方法
4、network:—— 提高網絡加載性能
可以看到頁面向伺服器請求了哪些資源、資源的大小以及加載資源花費的時間，當然也能看到哪些資源不能成功加載。此外，還可以檢視所有資源的HTTP的請求資訊，傳回内容等；
通過提供的網頁相關已經下載下傳和加載過的資源的詳細分析，可以在優化頁面的基本過程中，确定和找到那些請求通常要比預計的時間更長。
5、audit 審計 —— 頁面加載建議
審計面闆可以像加載頁面時那樣分析一個頁面。然後提供關于減少頁面加載時間的建議和優化，以此提高響應速度的優化方案。要進一步的了解該功能，推薦使用 pagespeed 。
6、Timeline —— 提高渲染性能
提供了加載頁面時花費時間的完整分析，所有事件，從下載下傳資源到處理Javascript，計算CSS樣式等花費的時間都展示在Timeline中
7、Profiles面闆—— 分析JavaScript 和 CSS 的性能
分析web應用或者頁面的執行時間以及記憶體使用情況，允許您為網絡應用程式或頁面配置執行時間和記憶體使用量。這些有助于你了解資源的消耗，以幫助你優化你的代碼。
提供的分析器有：
a、 CPU 分析器 會顯示你頁面上的 JavaScript 函數的執行時間
b、 堆記憶體配置設定器 顯示頁面的 JavaScript 對象和 DOM 節點。
c、 JavaScript 配置檔案會顯示腳本的執行時間。
8、Resources 資源面闆—— 存儲監視
允許你監視頁面中加載的資源。它可以讓你使用 HTML5 的本地存儲，資料庫，緩存，appcache
9、security
總結：當然chrome 功能子產品不僅限于此，除了以上幾個面闆，開發者工具還提供了Emulation功能，做移動開發時特别有用。
