摘要：作為一個(gè)前端開(kāi)發(fā)者，我也是注重的使用技巧。一般來(lái)說(shuō)，在日常開(kāi)發(fā)上，經(jīng)常使用的開(kāi)發(fā)者工具面板就是。最后一個(gè)就是主文件自身。

chrome，對(duì)于web開(kāi)發(fā)者而言，都是很熟悉的一個(gè)瀏覽器，無(wú)論是從事的是前端，后端或者是測(cè)試！簡(jiǎn)單、快捷和功能強(qiáng)大使它受到了許多開(kāi)發(fā)者的青睞！在瀏覽器排行上，chrome最多人使用，而且占了瀏覽器份額的半壁江山。可見(jiàn)其歡迎程度。作為一個(gè)前端開(kāi)發(fā)者，我也是注重chrome的使用技巧。今天給大家分享下，希望能幫到大家，如果大家還有些什么好用的技巧，歡迎在評(píng)論補(bǔ)充，讓大家交流意見(jiàn)，一起進(jìn)步！

1.今天關(guān)于chrome的指南，我也是以學(xué)習(xí)的態(tài)度寫(xiě)的，是不完全的，希望大家注意和理解！要想更深入了解chrome，要靠大家自主學(xué)習(xí)！
2.如果今天有什么寫(xiě)錯(cuò)了，寫(xiě)得不好，或者還有什么推薦的，非常希望和歡迎大家評(píng)論推薦，大家交流下意見(jiàn)，相互學(xué)習(xí)，相互進(jìn)步!
3.給大家提一個(gè)就是，chrome調(diào)試優(yōu)化。一般來(lái)說(shuō)，在日常開(kāi)發(fā)上，經(jīng)常使用的開(kāi)發(fā)者工具面板就是：element,console,sources,network,performance(timeline)。這五個(gè)，我感覺(jué)是萬(wàn)金油五兄弟了！除了這五個(gè)，其它的面板使用頻率可能不多，但是也要熟悉，知道。

這個(gè)想必大家會(huì)經(jīng)常用到，特別是切圖調(diào)整樣式的時(shí)候，這個(gè)我就按照?qǐng)D上的編號(hào)簡(jiǎn)單說(shuō)一下！
一：就是頁(yè)面上的元素，鼠標(biāo)放到上面，在頁(yè)面上會(huì)出現(xiàn)（二）的變化，方便查找元素！
三：點(diǎn)擊這個(gè)箭頭，然后就能在頁(yè)面上快速選擇元素！
四：瀏覽進(jìn)入移動(dòng)端適配模式，如下圖。可以更換各種機(jī)型，或者點(diǎn)擊‘Edit’添加其他機(jī)型或者自定義機(jī)型！旁邊的‘Online’就是模擬網(wǎng)絡(luò)的各種情況，‘Online’旁邊的圖標(biāo)就是橫豎屏切換！這里簡(jiǎn)單提一下，大家按需使用！
online

五：被選擇元素的所有的涉及樣式，頁(yè)面的樣式可以在這里隨意的修改！
六：被選擇元素所有計(jì)算后的樣式（有些樣式會(huì)重復(fù)，覆蓋，在這里就顯示覆蓋后的樣式）以及盒模型！
七：被選擇元素的事件（這個(gè)貌似只要知道就行了，至少我沒(méi)用過(guò)）

1.顏色取色器

2.改變顏色顯示方式

3.元素狀態(tài)篩選

注意看頁(yè)面的‘招商銀行’

4.html布局調(diào)試

注意看頁(yè)面的‘唯品會(huì)’

當(dāng)然，如果大家想改變html的元素，在這里也可以隨便改!這個(gè)步驟一般是在調(diào)試樣式的時(shí)候會(huì)用到！

5.css3動(dòng)畫(huà)曲線(xiàn)調(diào)試

如圖所示，沒(méi)改變曲線(xiàn)一下，上面紫色的球，就會(huì)根據(jù)曲線(xiàn)進(jìn)行運(yùn)動(dòng)，給開(kāi)發(fā)者提供一個(gè)動(dòng)畫(huà)的參考，下面也會(huì)生成相關(guān)曲線(xiàn)的代碼。這個(gè)也是做出優(yōu)美的css3動(dòng)畫(huà)的重要一步！

console這個(gè)界面，平常開(kāi)發(fā)用得非常多，調(diào)試JS代碼的時(shí)候，經(jīng)常需要在console輸出變量或者節(jié)點(diǎn)。個(gè)人使用上，除了在控制面板內(nèi)寫(xiě)jS外，用得最多的就是上圖，指向的那個(gè)按鈕，點(diǎn)擊一下就清空面板。這個(gè)感覺(jué)比console.clear()更快。
下面簡(jiǎn)單說(shuō)下我平常使用console的情況。

這個(gè)應(yīng)該就是console使用最多的功能。很多情況都是console.log輸出變量，這個(gè)方式比alert更加的好用，顯示的信息更全面。比如輸出一個(gè)對(duì)象和節(jié)點(diǎn)

alert({1:1});
console.log({1:1})
alert(document.getElementById("attribute-box"));
console.log(document.getElementById("attribute-box"))

alert

console

可能很多人會(huì)以為console.log只接收一個(gè)參數(shù)，其實(shí)不是，比如帶樣式的輸出

相信很多人都知道用console.log。但是console.info,console.warn,console.error , 這個(gè)三個(gè)大家就不是很常用，下面簡(jiǎn)單演示下！

console.log("這是普通信息！");
console.info("這是普通信息！");
console.warn("這是警告信息！");
console.error("這是錯(cuò)誤信息！");

PS：這個(gè)版本有點(diǎn)奇怪，之前console.info這個(gè)api在前面是有一個(gè)藍(lán)色的標(biāo)志的，我現(xiàn)在用的這個(gè)版本和console.log的表現(xiàn)完全一樣

console.time和console.timeEnd是用的第二多的api主要是檢測(cè)，一段代碼的執(zhí)行時(shí)間

console.time();
for(let i=0;i<10000;i++){
    
}
console.timeEnd();

console.table平常使用主要就是更直觀(guān)的顯示對(duì)象或者數(shù)組

let arr=[
    {a:1,b:2,c:3},
{a:1,b:4,c:3},
{a:3,b:2,c:3},
{a:4,b:2,c:3},
{a:1,b:5,c:3},
{a:1,b:9,c:3},
{a:1,b:2,c:7}
];
console.table(arr)

let arr1=[1,2,3,4,5]
console.table(arr1)

let obj2={a:1,b:2,c:3}
console.table(obj2)

console.count用法有點(diǎn)抽象，不知道怎么說(shuō)，看圖吧！看了就懂了！就是在調(diào)試代碼的時(shí)候，判斷一個(gè)函數(shù)的執(zhí)行次數(shù)，使用場(chǎng)景不多不少吧！

console.assert接收兩個(gè)參數(shù)，第一個(gè)參數(shù)為判斷條件，第二個(gè)參數(shù)是提示信息，當(dāng)條件為false時(shí)，提示錯(cuò)誤信息！

console.group和console.groupEnd也是更直觀(guān)顯示數(shù)據(jù)，但是使用場(chǎng)景感覺(jué)并不是很多。我也是知道，但是在開(kāi)發(fā)上沒(méi)用過(guò)！

console.group("1");
console.log("1模塊的信息 11111111...");
console.log("1模塊的信息 11111111...");
console.log("1模塊的信息 11111111...");
console.groupEnd();
console.group("2");
console.log("2模塊的信息 22222222...");
console.log("2模塊的信息 22222222...");
console.groupEnd();

看到$，大家不要以為是jquery，其實(shí)是瀏覽器自帶的一些api。這個(gè)在調(diào)試上就比較方便！
關(guān)于$的api，我知道的有幾個(gè)，但是我使用過(guò)用的就下面兩個(gè)。其它的沒(méi)怎么了解，大家有需要可以自行上網(wǎng)查找資料！

$:返回第一個(gè)符合條件的元素，相當(dāng)于document.querySelector

$$:返回所有符合條件的元素，相當(dāng)于document.querySelectorAll

getEventListeners作用就是查找并獲取選定元素的事件。用法如下

monitorEvents作用是監(jiān)控你所選元素關(guān)聯(lián)的所有事件，事件觸發(fā)時(shí)，在控制臺(tái)打印它們。

getEventListeners和monitorEvents感覺(jué)在開(kāi)發(fā)上用得并不多了，至少我沒(méi)用過(guò)。但是感覺(jué)會(huì)有用，就提及一下！

network就是每當(dāng)有請(qǐng)求發(fā)送的時(shí)候，都會(huì)被這里記錄，不管是請(qǐng)求文件，還是ajax請(qǐng)求。使用的場(chǎng)景也很多，下面就是面板，大家看下，就知道怎么用了，很好理解！

點(diǎn)擊一個(gè)請(qǐng)求，在右邊顯示請(qǐng)求的資源等各種信息，就是看到下圖的情形!

首先是請(qǐng)求的一些信息，需要關(guān)注的主要是下面這些！

然后請(qǐng)求返回的信息

以JSON形式返回

cookie和timeing也是請(qǐng)求的信息，但是我平常沒(méi)怎么關(guān)注，在這里就不多說(shuō)了！關(guān)于timing，大家可以參考這篇文章：chrome瀏覽器中的Timing詳情說(shuō)明

這一步就是打開(kāi)文件，在任意一行的行號(hào)，點(diǎn)擊就會(huì)出現(xiàn)一個(gè)斷點(diǎn)！

大家可能看到，上圖紅框的按鈕，我按照編號(hào)簡(jiǎn)單說(shuō)下：
1、停止當(dāng)前的斷點(diǎn)調(diào)試
2、繼續(xù)執(zhí)行下一行代碼，（1.這個(gè)方式不會(huì)進(jìn)入函數(shù)，2.這個(gè)方式快捷鍵是f10）
3、跳入函數(shù)中去（這個(gè)方式快捷鍵是f11）
4、跳出當(dāng)前的函數(shù)
5、禁用所有的斷點(diǎn)，停止任何調(diào)試
6、程序運(yùn)行時(shí)遇到異常時(shí)是否中斷調(diào)試

不說(shuō)話(huà)，看圖

至于旁邊這些，我平常沒(méi)關(guān)注過(guò)，需要的自行上網(wǎng)找資料，我在這里不展開(kāi)講了！

這個(gè)功能說(shuō)白了就是一個(gè)ctrl+p和enter快捷鍵的使用

這個(gè)就更沒(méi)什么了，就是點(diǎn)擊一下

這個(gè)面板前期可能用得不多，但是后期優(yōu)化的時(shí)候，會(huì)經(jīng)常使用，這個(gè)面板的功能也是很多，大家都多花點(diǎn)心思了！

首先解釋下，四個(gè)區(qū)域

擁有開(kāi)啟、停止記錄，配置記錄內(nèi)容。模擬網(wǎng)絡(luò)模式，手機(jī)核數(shù)等功能！這個(gè)沒(méi)什么，大家看下面板就是清楚了！

對(duì)頁(yè)面表現(xiàn)（行為）的一個(gè)概述。
概括區(qū)域由一下三個(gè)圖形記錄組成:

1.FPS
綠色的柱越高， FPS 值也越高，用戶(hù)看著就越流暢，體驗(yàn)就越好。如果太小，用戶(hù)看著會(huì)有卡頓的感覺(jué)

2.CPU
這個(gè)面積圖(area chart)表明了哪種事件在消耗 CPU 資源。

3.NET
某一個(gè)時(shí)刻頁(yè)面的表現(xiàn)形式（以某一個(gè)時(shí)刻的畫(huà)面展示）！把鼠標(biāo)移動(dòng)到FPS，CPU或者NET區(qū)域任意的位置，就會(huì)展示這個(gè)時(shí)間節(jié)點(diǎn)面的截圖。左右移動(dòng)鼠標(biāo)，可以重發(fā)當(dāng)時(shí)的屏幕錄像，利用這個(gè)可以用來(lái)分析各個(gè)動(dòng)畫(huà)的各個(gè)細(xì)節(jié)，或者是頁(yè)面加載的快慢！

這個(gè)面板，網(wǎng)上的說(shuō)法是:可視化 CPU 堆棧(stack)信息記錄。這個(gè)區(qū)域我沒(méi)接觸過(guò)，現(xiàn)在也是云里霧里，大家可以自行上網(wǎng)找資料，教程。我個(gè)人感覺(jué)一般也用不上，所以暫時(shí)沒(méi)有關(guān)注這一塊！

該面板展示當(dāng)前所選時(shí)間段的更多詳細(xì)信息！當(dāng)有具體事件被選擇時(shí)，該面板展示這個(gè)事件的更多詳細(xì)信息。

藍(lán)色(Loading)：網(wǎng)絡(luò)請(qǐng)求和HTML解析 
黃色(Scripting)：JavaScript編譯和執(zhí)行
紫色(Rendering)：樣式解析，計(jì)算，渲染。
綠色(Painting)：重排，重繪 
灰色(other)：其它資源花費(fèi)加載的時(shí)間
白色(Idle)：空閑等待時(shí)間

這個(gè)圖是招瓶頸直觀(guān)的方式之一！比如上圖，看到Scripting占了大部分時(shí)間，就是在執(zhí)行js上，或許有待優(yōu)化！

在平常開(kāi)發(fā)上，這個(gè)面板感覺(jué)用到的幾率不是很大，但是必須要知道！

Frames 將頁(yè)面上的資源按frame類(lèi)別進(jìn)行組織顯示。頂級(jí)的top是一個(gè)主文檔，在top下面是主文檔的Fonts、Images、Scripts、Stylesheets等資源。最后一個(gè)就是主文件自身。

這個(gè)我個(gè)人覺(jué)得知道下就可以了，基本很少用到。

關(guān)于chorem的插件或者擴(kuò)展程序，我用的也就幾個(gè)，下面簡(jiǎn)單推薦下，按需使用，如果不滿(mǎn)足，可以到谷歌應(yīng)用商店找。

管理host的一個(gè)工具

json格式化的工具

就是把當(dāng)前頁(yè)面的url轉(zhuǎn)成二維碼，使用場(chǎng)景就是當(dāng)要使用手機(jī)測(cè)試的時(shí)候，懶得在手機(jī)上輸入整個(gè)網(wǎng)址，直接掃碼就可在手機(jī)訪(fǎng)問(wèn)！如下圖

有了這個(gè)就能看到下面的擴(kuò)展，使用vue開(kāi)發(fā)的一個(gè)神奇，調(diào)試會(huì)變得很方便！（用這個(gè)插件切勿長(zhǎng)時(shí)間停留在這個(gè)面板，有可能頁(yè)面會(huì)奔潰）

網(wǎng)頁(yè)性能分析工具。這個(gè)有用，但是我用的比較少，可能目前的項(xiàng)目沒(méi)有那么嚴(yán)格，專(zhuān)業(yè)吧！尷尬中。。。

圖片太大，也有點(diǎn)多，我就放這兩張了！大家覺(jué)得有用，就下載就好

英文這個(gè)是很多程序員的硬傷，劃詞翻譯這個(gè)能很好幫到大家！

有這個(gè)插件，掘金每天會(huì)根據(jù)自己的設(shè)置，推送的文章和項(xiàng)目！（發(fā)稿前的這幾天，這個(gè)插件改版了，跟圖上會(huì)有不一樣，圖就不截了，大家注意下就好）

隨筆分類(lèi) - Chrome開(kāi)發(fā)者工具系列
全新Chrome Devtool Performance使用指南
前端 chrome 瀏覽器調(diào)試總結(jié)
你所不知道的 Console
chrome使用技巧（看了定不讓你失望）

好了，關(guān)于chrome的不完全指南就說(shuō)到這里了，上面所提及的內(nèi)容，可能也就chrome的20-40%功能，但是在日常開(kāi)發(fā)上的使用，可能占了80%。而且有時(shí)候，開(kāi)發(fā)效率不但是編輯器使用的熟練，代碼精通，瀏覽器使用的順手也是提高效率不可或缺的一環(huán)！熟練使用chrome和寫(xiě)代碼是一樣的道理，都是要靠自己多練，才能熟悉使用，熟能生巧！
最后，如果大家覺(jué)得我有哪里寫(xiě)錯(cuò)了，寫(xiě)得不好，有其它什么建議，推薦的的工具！非常歡迎大家補(bǔ)充。希望能讓大家交流意見(jiàn)，相互學(xué)習(xí)，一起進(jìn)步！

-------------------------華麗的分割線(xiàn)--------------------
想了解更多，關(guān)注關(guān)注我的微信公眾號(hào)：守候書(shū)閣