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

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

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

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

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

1.顏色取色器

2.改變顏色顯示方式

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

注意看頁面的‘招商銀行’

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

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

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

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

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

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

這個(gè)應(yīng)該就是console使用最多的功能。很多情況都是console.log輸出變量，這個(gè)方式比alert更加的好用，顯示的信息更全面。比如輸出一個(gè)對象和節(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è)大家就不是很常用，下面簡單演示下！

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主要是檢測，一段代碼的執(zhí)行時(shí)間

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

console.table平常使用主要就是更直觀的顯示對象或者數(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)抽象，不知道怎么說，看圖吧！看了就懂了！就是在調(diào)試代碼的時(shí)候，判斷一個(gè)函數(shù)的執(zhí)行次數(shù)，使用場景不多不少吧！

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

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

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è)，但是我使用過用的就下面兩個(gè)。其它的沒怎么了解，大家有需要可以自行上網(wǎng)查找資料！

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

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

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

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

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

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

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

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

然后請求返回的信息

以JSON形式返回

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

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

大家可能看到，上圖紅框的按鈕，我按照編號簡單說下：
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)試

不說話，看圖

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

json格式化的工具

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

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

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

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

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

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

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

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

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