前端開發神器之chrome 綜述

做爲前端工程師，也許你對chrome開發工具不陌生，但也談不上對各個模塊有深刻了解。
本文主要是爲chrome開發工具使用這個系列作個開篇。
參考資料：
谷歌開發者： https://developers.google.com/web/tools/chrome-devtools
極客官網：http://wiki.jikexueyuan.com/project/chrome-devtools/tips-and-tricks.html
chrome 系列
Chrome開發者工具不徹底指南（1、基礎功能篇）
Chrome開發者工具不徹底指南（2、進階篇）
Chrome開發者工具不徹底指南：（3、性能篇）
Chrome開發者工具不徹底指南（4、性能進階篇）
Chrome開發者工具不徹底指南（5、移動篇）
Chrome開發者工具不徹底指南（6、插件篇）

打開方式快捷鍵：ctrl+shift+I或F12
chrome九大面板：elements、console、 sources 、network、 timeline 、profiles、resources、audits、security（新增）
一、elements 面板：—— 審查元素
容許咱們從瀏覽器的角度看頁面，能夠查看chrome渲染頁面所須要的的HTML、CSS和DOM(Document Object Model)對象，並提供實時編輯保存顯示功能。
在Element中主要分兩塊大的部分：HTML結構窗格和DOM樣式、佈局計算結果、事件監聽、結構窗格

二、console面板:—— 記錄輸出診斷信息
顯示各類警告與錯誤信息，而且提供了shell用來和文檔、開發者工具交互。使用控制檯編程接口提供的方法來記錄診斷信息。如 console.log()或console.profile() 。

三、 source —— javascript調試
主要做爲js調試，幫助開發者快速發現問題的緣由和並找出有效的解決方法

四、network:—— 提升網絡加載性能
能夠看到頁面向服務器請求了哪些資源、資源的大小以及加載資源花費的時間，固然也能看到哪些資源不能成功加載。此外，還能夠查看全部資源的HTTP的請求信息，返回內容等；
經過提供的網頁相關已經下載和加載過的資源的詳細分析，能夠在優化頁面的基本過程當中，肯定和找到那些請求一般要比預計的時間更長。

五、audit 審計 —— 頁面加載建議
審計面板能夠像加載頁面時那樣分析一個頁面。而後提供關於減小頁面加載時間的建議和優化，以此提升響應速度的優化方案。要進一步的瞭解該功能，推薦使用 pagespeed 。

六、Timeline —— 提升渲染性能
提供了加載頁面時花費時間的完整分析，全部事件，從下載資源處處理Javascript，計算CSS樣式等花費的時間都展現在Timeline中

七、Profiles面板—— 分析JavaScript 和 CSS 的性能
分析web應用或者頁面的執行時間以及內存使用狀況，容許您爲網絡應用程序或頁面配置執行時間和內存使用量。這些有助於你理解資源的消耗，以幫助你優化你的代碼。
提供的分析器有：
a、 CPU 分析器 會顯示你頁面上的 JavaScript 函數的執行時間
b、 堆內存分配器 顯示頁面的 JavaScript 對象和 DOM 節點。
c、 JavaScript 配置文件會顯示腳本的執行時間。

八、Resources 資源面板—— 存儲監視
容許你監視頁面中加載的資源。它可讓你使用 HTML5 的本地存儲，數據庫，緩存，appcache

九、security

總結：固然chrome 功能模塊不只限於此，除了以上幾個面板，開發者工具還提供了Emulation功能，作移動開發時特別有用。