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

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

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

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

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

1.顏色取色器

2.改變顏色顯示方式

3.元素狀態篩選

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

4.html布局調試

注意看頁面的‘唯品會’

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

5.css3動畫曲線調試

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

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

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

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

alert

console

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

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

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

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

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

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

console.table平常使用主要就是更直觀的顯示對象或者數組

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用法有點抽象，不知道怎么說，看圖吧！看了就懂了！就是在調試代碼的時候，判斷一個函數的執行次數，使用場景不多不少吧！

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

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

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。這個在調試上就比較方便！
關于$的api，我知道的有幾個，但是我使用過用的就下面兩個。其它的沒怎么了解，大家有需要可以自行上網查找資料！

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

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

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

monitorEvents作用是監控你所選元素關聯的所有事件，事件觸發時，在控制臺打印它們。

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

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

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

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

然后請求返回的信息

以JSON形式返回

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

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

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

不說話，看圖

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

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

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

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

首先解釋下，四個區域

擁有開啟、停止記錄，配置記錄內容。模擬網絡模式，手機核數等功能！這個沒什么，大家看下面板就是清楚了！

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

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

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

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

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

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

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

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

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

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

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

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

管理host的一個工具

json格式化的工具

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

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

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

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

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

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

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

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

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