Chrome以其界面簡潔、大量的應(yīng)用插件、良好的代碼規(guī)范支持、強大的V8解釋器，和Chrome開發(fā)者工具給前端開發(fā)者帶來了很大的便利。利用好Chrome開發(fā)工具，能給我們開發(fā)工作帶來很大的便利。下面我們就詳細的介紹下Chrome DevTools。
1.怎么打開Chrome DevTools
開發(fā)者通過快捷鍵Ctrl+Shift+I或者直接按F12打開下面的面板：
我們從左到右依次介紹標簽項。
2.Elements標簽
Elements標簽頁左側(cè)是對Html元素的查看和編輯，右側(cè)是對CSS的查看和編輯。如下圖：
Element標簽頁左側(cè)：選中DOM對象之后右鍵，就可以看到能夠操作DOM元素的功能。
a.Add attribute:在標簽中添加新屬性；
b.Edit attribute:編輯標簽的屬性；
c.Edit as HTML:可以直接對HTML進行編輯和刪除，更改的結(jié)果會立即展示在頁面上；
d.Copy:可以用來復(fù)制HTML代碼，我們在看到別的網(wǎng)站寫的比較好的代碼的時候，可以直接復(fù)制過來；
e.Scroll into view:將頁面滾動到節(jié)點處；
d.break on:設(shè)置斷點。
Element標簽頁右側(cè)：選中DOM對象之后右鍵，就可以看到當(dāng)前標簽的CSS樣式、屬性等。雙擊，可以對CSS樣式進行編輯。
a.Styles:顯示用戶定義的樣式；
b.Computed:顯示開發(fā)者工具計算好的元素樣式；
c.Event Listeners:顯示當(dāng)前HTML DOM節(jié)點和其祖先節(jié)點的所有JavaScript事件監(jiān)聽器，這里的監(jiān)聽腳本可以來自Chrome插件；
d.Properties:全面的列出當(dāng)前選中內(nèi)容的屬性。
3.Console標簽
Console標簽頁也是javascript控制臺，在這個面板可以查看錯誤信息、打印調(diào)試信息、寫一些測試腳本，還可以作為Javascript API查看用。
注意：當(dāng)需要換行的時候而不是回車的時候，請按Shift+Enter。
4.Sources標簽
Source頁面內(nèi)我們能看到當(dāng)前瀏覽器頁面中的js源文件。在這里我們可以設(shè)置斷點，調(diào)試js代碼。
a.設(shè)置斷點的方法
可以點擊JS代碼前面的數(shù)字外來設(shè)置斷點，如果當(dāng)前代碼是經(jīng)過壓縮的，可以點擊下方的花括號{}來增強可讀性，所有的斷點都會列出在右側(cè)的斷點區(qū)。
b.斷點觸發(fā)
① DOM元素節(jié)點發(fā)生改變時
在Elements面板中指定的DOM節(jié)點上右擊，在彈出的菜單中選擇Break on...，可以看到三個選擇項，比如我們選擇Subtree modifications，
那么當(dāng)選擇的節(jié)點里面的子節(jié)點被添加、刪除、修改，則斷點就會被觸發(fā)。
②XHR生命周期改變時
當(dāng)XHR生命周期狀態(tài)發(fā)生改變或者XHR的URL與Sources面板右側(cè)的XHR Breakpoints欄設(shè)置的字符串匹配時，則斷點就會有觸發(fā)。
③指定事件執(zhí)行時
在Sources面板右側(cè)的XHR Breakpoints欄下面是Event Listener Breakpoints,列出了各種類型的事件，勾選你要監(jiān)聽的事件，在指定的事件執(zhí)行時，斷點就會有觸發(fā)。
5.Application標簽
Application標簽頁主要是記錄網(wǎng)站加載的所有資源信息，包括存儲數(shù)據(jù)（Local Storage,Session Storage、IndexedDB、Web SQL、Cookies）、緩存數(shù)據(jù)、字體、圖片、腳本、樣式等。
Local Storage：用于存儲客戶端瀏覽器的數(shù)據(jù)，它與cookie的不同之處在于沒有時間限制，屬于html5中的新特性以key/value的方式進行存儲的，并且value只能是字符串形式，如果要使用其他數(shù)據(jù)類型，需要進行相應(yīng)的轉(zhuǎn)換。
Session Storage:用于本地存儲一個回話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在一個回話中的頁面才能訪問，并且當(dāng)回話結(jié)束后，數(shù)據(jù)隨之銷毀。Session Storage不是一種持久化的本地存儲，僅僅是會話級別的存儲。
Frames窗格：頂級的top是一個主文檔，在top下面是主文檔的Fonts、Images、Scripts、Stylesheets等資源。最后一個就是主文件本身。
6.Audits標簽
Audits標簽頁可以幫你分析頁面性能，有助于優(yōu)化前端頁面，分析后得到報告
7.Profiles標簽
Profiles標簽頁可以查看CPU執(zhí)行時間與內(nèi)存占用，這里不做過多介紹，后面會寫專題介紹。
8.Network標簽
Network標簽頁記錄從發(fā)起網(wǎng)頁頁面請求的Request后分析HTTP請求后得到的各個請求資源信息（包括狀態(tài)、資源類型、大小和所用時間等），可以根據(jù)這個進行網(wǎng)絡(luò)性能優(yōu)化。該面板的圖如下，共有5個視窗：
a.Controls（工具欄）：控制Networ的功能和外觀；
b.Filters（篩選欄）：控制Requests Table具體顯示哪些內(nèi)容；
c.Overview（概覽）：資源被加載過來的時間線，如果多條時間線垂直堆疊，表示多個資源被并行加載；
d.Request Table（請求列表）：改視窗列出了所有的資源請求，默認按時間順序排序，點擊資源，可以查看更詳細的信息；
e.Summary（總覽）：匯總了請求數(shù)量，傳輸數(shù)據(jù)大小，加載時間等信息。
其中Request Table顯示的信息如下：
- Name 資源名稱：點擊名稱可以查看資源的詳細情況，包括Headers、Preview、Response、Timing。
- Status HTTP狀態(tài)碼
- Type 請求的資源MIME類型
- Initiator 標記請求由哪個對象或進程發(fā)起的（請求源）。
- Size從服務(wù)器下載的文件和請求的資源大小。如果是從緩存中取得的資源則該列會顯示
- Time請求或下載的時間，從發(fā)起Request到獲取到Response所用的總時間
- Waterfall顯示所有網(wǎng)絡(luò)請求的可視化瀑布流（時間狀態(tài)軸），點擊時間軸，可以查看該請求的詳細時間，點擊列頭則可以根據(jù)指定的字段排序
9.Performance標簽
Chrome57已經(jīng)將Timeline改為Performance。在加載和使用網(wǎng)頁應(yīng)用程序或網(wǎng)頁時，時間軸面板提供關(guān)于時間開銷的完整概述。包括從加載資源到解析JavaScript，以及計算方式在內(nèi)的所有事件，都會重新繪制在一個時間表中。該面板共有4個視窗：
a.Controls 錄制開關(guān)和控制錄制過程中需要記錄哪些信息。
b.Overview 網(wǎng)頁性能的概要信息。
c.Flame Chart CPU堆棧軌跡的可視化圖表(火焰圖)。在圖表里面有1到3條虛豎線。
d.Details 當(dāng)選擇一個指定的事件后，會顯示這個事件的更多信息；當(dāng)沒有選擇事件時，會顯示指定的時間幀信息。
10.Security標簽
Security標簽頁可以告訴你這個網(wǎng)站的安全性，查看有效的證書等。如果網(wǎng)頁是安全的，則會顯示一條信息：This page is secure (valid HTTPS)，點擊View certificate可以查看main origin的服務(wù)器證書信息；如果網(wǎng)頁是不安全的，則會顯示：This page is not secure。
該面板可以區(qū)分兩類不安全的頁面：
- 如果被請求的頁面通過HTTP提供服務(wù)，那么這個主源就會被標記為不安全。
- 如果被請求的頁面是通過HTTPS獲取的，但是這個頁面接著通過HTTP繼續(xù)從其他源檢索內(nèi)容，那么這個頁面仍然被標記為不安全。這就是所謂的混合內(nèi)容頁面，混合內(nèi)容頁面只是部分受到保護，因為HTTP內(nèi)容（非加密的內(nèi)容）可以被嗅探者入侵。
版權(quán)歸本人所有，如有轉(zhuǎn)載，請注明來源。
