Chrome 開發者工具介紹（一）

　　Google Chrome 是一款由Google開發的網頁瀏覽器，"Chrome"是化學元素」鉻「的英文名稱。Google瀏覽器基於Chromium開源項目，其內核採用的是webkit.Chrome包括不少優勢，包括簡潔的界面，很高的穩定性，速度和安全性。時至今日，Chrome發佈已經超過7年，憑藉其良好的性能，其市場佔有率已經躍居第一位。於前端工程師而言，Chrome也是一個不可多得的開發工具。能夠說，它一直走在其餘瀏覽器前列。

打開開發者工具

除了經常使用的點擊瀏覽器右上角，而後選擇更多工具>開發者工具

鼠標右鍵點擊元素，而後選擇審查元素

使用快捷鍵F12打開

使用快捷鍵Ctrl+Shift+I打開

使用快捷鍵Ctrl+Shift+J打開

使用快捷鍵Ctrl+Shift+C打開

開發者工具窗口介紹

開發者工具上方有一個工具條，每一個選項都對應一個面板，每一個面板都有其對應的信息，默認狀況下，一共有9個面板，可使用快捷Ctrl+[和Ctrl+]這面板之間作快捷切換：

• Elments：當前頁面的文檔結構，樣式等信息。
• Network：記錄着網頁的網絡操做，包括時間信息，請求和響應頭，cookies，等等
• Sources：包括當前網頁所應用的全部文件和路徑
• Timeline：時間軸面板記錄和分析着當網頁運行時，全部的活動信息。主要用於分析性能。
• Profiles：記錄當執行某項操做時，時間信息和內存信息。
• Resources：查看網頁的本地數據。
• Audits：分析性能，提出優化意見，推薦使用PageSpeed Insights.
• Console：控制檯主要用於調試代碼

查看DOM和樣式

使用Elements面板能夠查看頁面的樣式和DOM,而且可以實時編輯這些代碼。

當咱們打開Elements面板時，分爲左右兩欄，左邊是html,右邊是CSS樣式和其餘的選項。當有一個萌萌的設計師，想要知道某個部分的背景的顏色或者字體是什麼的時候，就可使用審查元素或者點開該面板，而後使用左上角的放大鏡選中它，就能夠得知該樣式。

Console測試網頁或程序

console面板提供了API可以讓你在開發過程當中，給出一些有用的信息。以幫助更好更快地開發和調試代碼。

Debugging JavaScript

隨着javascript應用的越加複雜，開發者須要一種debugging 工具更有效的方式來發現和修復代碼的bug.開發者工具包括了一系列的工具能讓你debugging更輕鬆。

提升網絡性能

Network面板記錄着對資源的請求和下載的時間，能對你分析應用的網絡性能有極大的幫助。

Audits

Audits面板可以分析當頁面加載時，它會提出一些建議以更好地提升加載時間和性能等。

提升渲染性能

Timeline面板提供了當頁面加載或使用時，所花時間的預覽信息。包括全部的事件，計算樣式，加載等等。

JavaScript和CSS性能

Profiles面板當你操做是，它可以記錄和分析執行時間和內存使用狀況。能幫助你更好地優化代碼和資源，它提供了：

• CPU profiles 記錄你執行腳本時所花的時間；
• Heap profiles 記錄你內存在不一樣部分的分佈狀況；
• JavaScript 記錄你的腳本執行的時間；

查看存儲

Resources 面板顯示你加載頁面所存儲的數據信息，包括緩存，cookies,等等。

你們能夠訪問：https://developer.chrome.com/devtools 得到更多信息。