chrome開發(fā)者模式
就算你不是一名前端開發(fā)工程師，相信你也不會(huì)對(duì)Chrome瀏覽器感到陌生。根據(jù)最新的一份（2015/06）的瀏覽器市場(chǎng)占有率報(bào)告，Chrome近乎占有瀏覽器天下的半壁江山。簡(jiǎn)單、快捷使它成為了新時(shí)代人們的新寵。
如何喚醒開發(fā)者工具
通過菜單欄右上角的選項(xiàng)選擇，或亦可以使用快捷鍵windows為F12、mac為alt+command+i
Elements
在Element中主要分兩塊大的部分
A：HTML結(jié)構(gòu)面板
B：操作dom樣式、結(jié)構(gòu)的顯示面板
如上圖：左側(cè)為html的頁(yè)面結(jié)構(gòu)，右側(cè)為所選dom節(jié)點(diǎn)的樣式面板
籃筐處按鈕。
點(diǎn)擊后可直接點(diǎn)擊頁(yè)面中按鈕等元素以直接選中對(duì)應(yīng)的dom節(jié)點(diǎn)。
點(diǎn)擊紅色框按鈕可將頁(yè)面變?yōu)檫m配移動(dòng)端窗口，用以調(diào)試移動(dòng)端應(yīng)用。
在左側(cè)可直接修改元素樣式，以查看頁(yè)面效果。
Console
展示頁(yè)面的一些輸出內(nèi)容，或報(bào)錯(cuò)提示等。
Soruce
當(dāng)前站點(diǎn)包含的資源都可在其中查看。
如上圖：左側(cè)為項(xiàng)目?jī)?nèi)靜態(tài)資源目錄。
右側(cè)為具體文件內(nèi)容。ps:由于webpack等模塊化技術(shù)的運(yùn)用，所看到的資源文件可能是經(jīng)過壓縮打包后的結(jié)果。如要查看具體項(xiàng)目對(duì)應(yīng)文件，可使用ctrl+o，進(jìn)行查詢打開。可對(duì)代碼進(jìn)行斷點(diǎn)操作用以調(diào)試程序。
Network
用以查看網(wǎng)絡(luò)連接請(qǐng)求等內(nèi)容的版塊?？稍谄渲胁榭错?yè)面向服務(wù)器發(fā)送的各類請(qǐng)求。
如上圖，紅框部分可對(duì)網(wǎng)絡(luò)請(qǐng)求進(jìn)行篩選，可更方便的找到自己想要查看的網(wǎng)絡(luò)請(qǐng)求。
上圖為一些特殊的瀏覽器操作：
1.group by frame ：對(duì)請(qǐng)求按窗口進(jìn)行排序。
2.Disable cache : 禁用緩存。
3.Offline Online ：設(shè)為線下/線上模式。
網(wǎng)絡(luò)請(qǐng)求內(nèi)部結(jié)構(gòu)（報(bào)文）
如下圖，紅框部分為一個(gè)請(qǐng)求的內(nèi)容分類：
包括Headers、Preview、Response、Cookies、Timming
Headers報(bào)文頭部
頭部信息：包括請(qǐng)求服務(wù)地址、請(qǐng)求允許方式、請(qǐng)求緩存相關(guān)信息、以及請(qǐng)求傳遞參數(shù)。
Preview
服務(wù)端返回的數(shù)據(jù)預(yù)覽
Response
網(wǎng)絡(luò)請(qǐng)求返回的數(shù)據(jù)
Cookies
包括：發(fā)送的cookies信息及返回的cookies信息
Timing
本次網(wǎng)絡(luò)請(qǐng)求得時(shí)間信息
以上為一些基礎(chǔ)的chrome開發(fā)者工具的使用解析，均為簡(jiǎn)略說明，為讓非前端開發(fā)人員對(duì)chrome的開發(fā)工具有一個(gè)簡(jiǎn)單了解，以方便日后再團(tuán)隊(duì)開發(fā)寫作中，每個(gè)人都能有一個(gè)更好的錯(cuò)誤定位能力，可初步判斷bug是前端或是后端造成，減少無效的溝通成本。
