Chrome以其界面簡(jiǎn)潔、大量的應(yīng)用插件敲霍、良好的代碼規(guī)范支持俊马、強(qiáng)大的V8解釋器，和Chrome開發(fā)者工具給前端開發(fā)者帶來了很大的便利肩杈。利用好Chrome開發(fā)工具柴我，能給我們開發(fā)工作帶來很大的便利。下面我們就詳細(xì)的介紹下Chrome DevTools扩然。
1.怎么打開Chrome DevTools
開發(fā)者通過快捷鍵Ctrl+Shift+I或者直接按F12打開下面的面板：
我們從左到右依次介紹標(biāo)簽項(xiàng)艘儒。
2.Elements標(biāo)簽
Elements標(biāo)簽頁左側(cè)是對(duì)Html元素的查看和編輯，右側(cè)是對(duì)CSS的查看和編輯夫偶。如下圖：
Element標(biāo)簽頁左側(cè)：選中DOM對(duì)象之后右鍵界睁，就可以看到能夠操作DOM元素的功能。
a.Add attribute:在標(biāo)簽中添加新屬性兵拢；
b.Edit attribute:編輯標(biāo)簽的屬性翻斟；
c.Edit as HTML:可以直接對(duì)HTML進(jìn)行編輯和刪除，更改的結(jié)果會(huì)立即展示在頁面上说铃；
d.Copy:可以用來復(fù)制HTML代碼访惜，我們?cè)诳吹絼e的網(wǎng)站寫的比較好的代碼的時(shí)候敞斋，可以直接復(fù)制過來；
e.Scroll into view:將頁面滾動(dòng)到節(jié)點(diǎn)處疾牲；
d.break on:設(shè)置斷點(diǎn)。
Element標(biāo)簽頁右側(cè)：選中DOM對(duì)象之后右鍵衙解，就可以看到當(dāng)前標(biāo)簽的CSS樣式阳柔、屬性等。雙擊蚓峦，可以對(duì)CSS樣式進(jìn)行編輯舌剂。
a.Styles:顯示用戶定義的樣式；
b.Computed:顯示開發(fā)者工具計(jì)算好的元素樣式暑椰；
c.Event Listeners:顯示當(dāng)前HTML DOM節(jié)點(diǎn)和其祖先節(jié)點(diǎn)的所有JavaScript事件監(jiān)聽器霍转，這里的監(jiān)聽腳本可以來自Chrome插件；
d.Properties:全面的列出當(dāng)前選中內(nèi)容的屬性一汽。
3.Console標(biāo)簽
Console標(biāo)簽頁也是javascript控制臺(tái)避消，在這個(gè)面板可以查看錯(cuò)誤信息、打印調(diào)試信息召夹、寫一些測(cè)試腳本岩喷，還可以作為Javascript API查看用。
注意：當(dāng)需要換行的時(shí)候而不是回車的時(shí)候监憎，請(qǐng)按Shift+Enter纱意。
4.Sources標(biāo)簽
Source頁面內(nèi)我們能看到當(dāng)前瀏覽器頁面中的js源文件。在這里我們可以設(shè)置斷點(diǎn)鲸阔，調(diào)試js代碼偷霉。
a.設(shè)置斷點(diǎn)的方法
可以點(diǎn)擊JS代碼前面的數(shù)字外來設(shè)置斷點(diǎn)，如果當(dāng)前代碼是經(jīng)過壓縮的褐筛，可以點(diǎn)擊下方的花括號(hào){}來增強(qiáng)可讀性类少，所有的斷點(diǎn)都會(huì)列出在右側(cè)的斷點(diǎn)區(qū)。
b.斷點(diǎn)觸發(fā)
① DOM元素節(jié)點(diǎn)發(fā)生改變時(shí)
在Elements面板中指定的DOM節(jié)點(diǎn)上右擊渔扎，在彈出的菜單中選擇Break on...瞒滴，可以看到三個(gè)選擇項(xiàng)，比如我們選擇Subtree modifications赞警，
那么當(dāng)選擇的節(jié)點(diǎn)里面的子節(jié)點(diǎn)被添加妓忍、刪除、修改愧旦，則斷點(diǎn)就會(huì)被觸發(fā)世剖。
②XHR生命周期改變時(shí)
當(dāng)XHR生命周期狀態(tài)發(fā)生改變或者XHR的URL與Sources面板右側(cè)的XHR Breakpoints欄設(shè)置的字符串匹配時(shí)，則斷點(diǎn)就會(huì)有觸發(fā)笤虫。
③指定事件執(zhí)行時(shí)
在Sources面板右側(cè)的XHR Breakpoints欄下面是Event Listener Breakpoints,列出了各種類型的事件旁瘫，勾選你要監(jiān)聽的事件祖凫，在指定的事件執(zhí)行時(shí)，斷點(diǎn)就會(huì)有觸發(fā)酬凳。
5.Application標(biāo)簽
Application標(biāo)簽頁主要是記錄網(wǎng)站加載的所有資源信息惠况，包括存儲(chǔ)數(shù)據(jù)（Local Storage,Session Storage、IndexedDB宁仔、Web SQL稠屠、Cookies）、緩存數(shù)據(jù)翎苫、字體权埠、圖片、腳本煎谍、樣式等攘蔽。
Local Storage：用于存儲(chǔ)客戶端瀏覽器的數(shù)據(jù)，它與cookie的不同之處在于沒有時(shí)間限制呐粘，屬于html5中的新特性以key/value的方式進(jìn)行存儲(chǔ)的满俗，并且value只能是字符串形式，如果要使用其他數(shù)據(jù)類型作岖，需要進(jìn)行相應(yīng)的轉(zhuǎn)換漫雷。
Session Storage:用于本地存儲(chǔ)一個(gè)回話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在一個(gè)回話中的頁面才能訪問鳍咱，并且當(dāng)回話結(jié)束后降盹，數(shù)據(jù)隨之銷毀。Session Storage不是一種持久化的本地存儲(chǔ)谤辜，僅僅是會(huì)話級(jí)別的存儲(chǔ)蓄坏。
Frames窗格：頂級(jí)的top是一個(gè)主文檔，在top下面是主文檔的Fonts丑念、Images涡戳、Scripts、Stylesheets等資源脯倚。最后一個(gè)就是主文件本身渔彰。
6.Audits標(biāo)簽
Audits標(biāo)簽頁可以幫你分析頁面性能，有助于優(yōu)化前端頁面推正，分析后得到報(bào)告
7.Profiles標(biāo)簽
Profiles標(biāo)簽頁可以查看CPU執(zhí)行時(shí)間與內(nèi)存占用恍涂，這里不做過多介紹，后面會(huì)寫專題介紹植榕。
8.Network標(biāo)簽
Network標(biāo)簽頁記錄從發(fā)起網(wǎng)頁頁面請(qǐng)求的Request后分析HTTP請(qǐng)求后得到的各個(gè)請(qǐng)求資源信息（包括狀態(tài)再沧、資源類型、大小和所用時(shí)間等）尊残，可以根據(jù)這個(gè)進(jìn)行網(wǎng)絡(luò)性能優(yōu)化炒瘸。該面板的圖如下淤堵，共有5個(gè)視窗：
a.Controls（工具欄）：控制Networ的功能和外觀；
b.Filters（篩選欄）：控制Requests Table具體顯示哪些內(nèi)容顷扩；
c.Overview（概覽）：資源被加載過來的時(shí)間線拐邪，如果多條時(shí)間線垂直堆疊，表示多個(gè)資源被并行加載隘截；
d.Request Table（請(qǐng)求列表）：改視窗列出了所有的資源請(qǐng)求扎阶，默認(rèn)按時(shí)間順序排序，點(diǎn)擊資源技俐，可以查看更詳細(xì)的信息；
e.Summary（總覽）：匯總了請(qǐng)求數(shù)量统台，傳輸數(shù)據(jù)大小雕擂，加載時(shí)間等信息。
其中Request Table顯示的信息如下：
- Name 資源名稱：點(diǎn)擊名稱可以查看資源的詳細(xì)情況贱勃，包括Headers井赌、Preview、Response贵扰、Timing仇穗。
- Status HTTP狀態(tài)碼
- Type 請(qǐng)求的資源MIME類型
- Initiator 標(biāo)記請(qǐng)求由哪個(gè)對(duì)象或進(jìn)程發(fā)起的（請(qǐng)求源）。
- Size從服務(wù)器下載的文件和請(qǐng)求的資源大小戚绕。如果是從緩存中取得的資源則該列會(huì)顯示
- Time請(qǐng)求或下載的時(shí)間纹坐，從發(fā)起Request到獲取到Response所用的總時(shí)間
- Waterfall顯示所有網(wǎng)絡(luò)請(qǐng)求的可視化瀑布流（時(shí)間狀態(tài)軸），點(diǎn)擊時(shí)間軸舞丛，可以查看該請(qǐng)求的詳細(xì)時(shí)間耘子，點(diǎn)擊列頭則可以根據(jù)指定的字段排序
9.Performance標(biāo)簽
Chrome57已經(jīng)將Timeline改為Performance。在加載和使用網(wǎng)頁應(yīng)用程序或網(wǎng)頁時(shí)球切，時(shí)間軸面板提供關(guān)于時(shí)間開銷的完整概述谷誓。包括從加載資源到解析JavaScript，以及計(jì)算方式在內(nèi)的所有事件吨凑，都會(huì)重新繪制在一個(gè)時(shí)間表中捍歪。該面板共有4個(gè)視窗：
a.Controls 錄制開關(guān)和控制錄制過程中需要記錄哪些信息。
b.Overview 網(wǎng)頁性能的概要信息鸵钝。
c.Flame Chart CPU堆棧軌跡的可視化圖表(火焰圖)糙臼。在圖表里面有1到3條虛豎線。
d.Details 當(dāng)選擇一個(gè)指定的事件后恩商，會(huì)顯示這個(gè)事件的更多信息弓摘；當(dāng)沒有選擇事件時(shí)，會(huì)顯示指定的時(shí)間幀信息痕届。
10.Security標(biāo)簽
Security標(biāo)簽頁可以告訴你這個(gè)網(wǎng)站的安全性韧献，查看有效的證書等末患。如果網(wǎng)頁是安全的，則會(huì)顯示一條信息：This page is secure (valid HTTPS)锤窑，點(diǎn)擊View certificate可以查看main origin的服務(wù)器證書信息璧针；如果網(wǎng)頁是不安全的，則會(huì)顯示：This page is not secure渊啰。
該面板可以區(qū)分兩類不安全的頁面：
- 如果被請(qǐng)求的頁面通過HTTP提供服務(wù)探橱，那么這個(gè)主源就會(huì)被標(biāo)記為不安全。
- 如果被請(qǐng)求的頁面是通過HTTPS獲取的绘证，但是這個(gè)頁面接著通過HTTP繼續(xù)從其他源檢索內(nèi)容隧膏，那么這個(gè)頁面仍然被標(biāo)記為不安全。這就是所謂的混合內(nèi)容頁面嚷那，混合內(nèi)容頁面只是部分受到保護(hù)胞枕，因?yàn)镠TTP內(nèi)容（非加密的內(nèi)容）可以被嗅探者入侵。
版權(quán)歸本人所有魏宽，如有轉(zhuǎn)載腐泻，請(qǐng)注明來源。
