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

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

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

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

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

1.顏色取色器

2.改變顏色顯示方式

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

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

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

注意看頁面的‘唯品會’

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

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

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

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

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

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

alert

console

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

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

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

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

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

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ào)試代碼的時候，判斷一個函數(shù)的執(zhí)行次數(shù)，使用場景不多不少吧！

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

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，其實是瀏覽器自帶的一些api。這個在調(diào)試上就比較方便！
關(guān)于$的api，我知道的有幾個，但是我使用過用的就下面兩個。其它的沒怎么了解，大家有需要可以自行上網(wǎng)查找資料！

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

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

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

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

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

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

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

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

然后請求返回的信息

以JSON形式返回

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

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

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

不說話，看圖

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

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

這個就更沒什么了，就是點擊一下

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

管理host的一個工具

json格式化的工具

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

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

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

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

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

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

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

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

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