1.前言
chrome，對於web開發者而言，都是很熟悉的一個瀏覽器，無論是從事的是前端，後端或者是測試！簡單、快捷和功能強大使它受到了許多開發者的青睞！在瀏覽器排行上，chrome最多人使用，而且佔了瀏覽器份額的半壁江山。可見其歡迎程度。作為一個前端開發者，我也是注重chrome的使用技巧。今天給大家分享下，希望能幫到大家，如果大家還有些什麼好用的技巧，歡迎在評論補充，讓大家交流意見，一起進步！
1.今天關於
chrome的指南，我也是以學習的態度寫的，是不完全的，希望大家注意和理解！要想更深入瞭解chrome，要靠大家自主學習！
2.如果今天有什麼寫錯了，寫得不好，或者還有什麼推薦的，非常希望和歡迎大家評論推薦，大家交流下意見，相互學習，相互進步!
3.給大家提一個就是，chrome除錯優化。一般來說，在日常開發上，經常使用的開發者工具皮膚就是：element,console,sources,network,performance(timeline)。這五個，我感覺是萬金油五兄弟了！除了這五個，其它的皮膚使用頻率可能不多，但是也要熟悉，知道。
2.element
這個想必大家會經常用到，特別是切圖調整樣式的時候，這個我就按照圖上的編號簡單說一下！一：就是頁面上的元素，滑鼠放到上面，在頁面上會出現（二）的變化，方便查詢元素！三：點選這個箭頭，然後就能在頁面上快速選擇元素！四：瀏覽進入移動端適配模式，如下圖。可以更換各種機型，或者點選‘Edit’新增其他機型或者自定義機型！旁邊的‘Online’就是模擬網路的各種情況，‘Online’旁邊的圖示就是橫豎屏切換！這裡簡單提一下，大家按需使用！
online
五：被選擇元素的所有的涉及樣式，頁面的樣式可以在這裡隨意的修改！六：被選擇元素所有計算後的樣式（有些樣式會重複，覆蓋，在這裡就顯示覆蓋後的樣式）以及盒模型！七：被選擇元素的事件（這個貌似只要知道就行了，至少我沒用過）
其它常用功能
1.顏色取色器
2.改變顏色顯示方式
3.元素狀態篩選
注意看頁面的‘招商銀行’
4.html佈局除錯
注意看頁面的‘唯品會’
當然，如果大家想改變html的元素，在這裡也可以隨便改!這個步驟一般是在除錯樣式的時候會用到！
5.css3動畫曲線除錯
如圖所示，沒改變曲線一下，上面紫色的球，就會根據曲線進行運動，給開發者提供一個動畫的參考，下面也會生成相關曲線的程式碼。這個也是做出優美的css3動畫的重要一步！
3.console
console這個介面，平常開發用得非常多，除錯JS程式碼的時候，經常需要在console輸出變數或者節點。個人使用上，除了在控制皮膚內寫jS外，用得最多的就是上圖，指向的那個按鈕，點選一下就清空皮膚。這個感覺比console.clear()更快。
下面簡單說下我平常使用console的情況。
console.log
這個應該就是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
console.time和console.timeEnd是用的第二多的api主要是檢測，一段程式碼的執行時間
console.time();
for(let i=0;i<10000;i++){
}
console.timeEnd();複製程式碼
console.table
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.count用法有點抽象，不知道怎麼說，看圖吧！看了就懂了！就是在除錯程式碼的時候，判斷一個函式的執行次數，使用場景不多不少吧！
console.assert
console.assert接收兩個引數，第一個引數為判斷條件，第二個引數是提示資訊，當條件為false時，提示錯誤資訊！
console.group和console.groupEnd
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。這個在除錯上就比較方便！
$:返回第一個符合條件的元素，相當於document.querySelector
$$:返回所有符合條件的元素，相當於document.querySelectorAll
查詢和監控事件
getEventListeners作用就是查詢並獲取選定元素的事件。用法如下
monitorEvents作用是監控你所選元素關聯的所有事件，事件觸發時，在控制檯列印它們。
getEventListeners和monitorEvents感覺在開發上用得並不多了，至少我沒用過。但是感覺會有用，就提及一下！
4.network
network就是每當有請求傳送的時候，都會被這裡記錄，不管是請求檔案，還是ajax請求。使用的場景也很多，下面就是皮膚，大家看下，就知道怎麼用了，很好理解！
點選一個請求，在右邊顯示請求的資源等各種資訊，就是看到下圖的情形!
首先是請求的一些資訊，需要關注的主要是下面這些！
然後請求返回的資訊
以JSON形式返回
cookie和timeing也是請求的資訊，但是我平常沒怎麼關注，在這裡就不多說了！關於timing，大家可以參考這篇文章：chrome瀏覽器中的Timing詳情說明
5.Sources
1.斷點除錯
這一步就是開啟檔案，在任意一行的行號，點選就會出現一個斷點！
2.debugger除錯
大家可能看到，上圖紅框的按鈕，我按照編號簡單說下：
1、停止當前的斷點除錯
2、繼續執行下一行程式碼，（1.這個方式不會進入函式，2.這個方式快捷鍵是f10）
3、跳入函式中去（這個方式快捷鍵是f11）
4、跳出當前的函式
5、禁用所有的斷點，停止任何除錯
6、程式執行時遇到異常時是否中斷除錯
3.除錯中檢視值
不說話，看圖
至於旁邊這些，我平常沒關注過，需要的自行上網找資料，我在這裡不展開講了！
3.查詢和切換檔案
這個功能說白了就是一個ctrl+p和enter快捷鍵的使用
4.格式化程式碼
這個就更沒什麼了，就是點選一下
6.performance(timeline)
這個皮膚前期可能用得不多，但是後期優化的時候，會經常使用，這個皮膚的功能也是很多，大家都多花點心思了！
首先解釋下，四個區域
一.控制皮膚（Controls）
擁有開啟、停止記錄，配置記錄內容。模擬網路模式，手機核數等功能！這個沒什麼，大家看下皮膚就是清楚了！
二.概括（Overview）
對頁面表現（行為）的一個概述。
概括區域由一下三個圖形記錄組成:
1.FPS
綠色的柱越高， FPS 值也越高，使用者看著就越流暢，體驗就越好。如果太小，使用者看著會有卡頓的感覺
2.CPU
這個面積圖(area chart)表明了哪種事件在消耗 CPU 資源。
3.NET
某一個時刻頁面的表現形式（以某一個時刻的畫面展示）！把滑鼠移動到FPS，CPU或者NET區域任意的位置，就會展示這個時間節點面的截圖。左右移動滑鼠，可以重發當時的螢幕錄影，利用這個可以用來分析各個動畫的各個細節，或者是頁面載入的快慢！
三.Flame Chart
這個皮膚，網上的說法是:視覺化 CPU 堆疊(stack)資訊記錄。這個區域我沒接觸過，現在也是雲裡霧裡，大家可以自行上網找資料，教程。我個人感覺一般也用不上，所以暫時沒有關注這一塊！
四.詳細資訊（Detail）
該皮膚展示當前所選時間段的更多詳細資訊！當有具體事件被選擇時，該皮膚展示這個事件的更多詳細資訊。
藍色(Loading)：網路請求和HTML解析
黃色(Scripting)：JavaScript編譯和執行
紫色(Rendering)：樣式解析，計算，渲染。
綠色(Painting)：重排，重繪
灰色(other)：其它資源花費載入的時間
白色(Idle)：空閒等待時間
這個圖是招瓶頸直觀的方式之一！比如上圖，看到Scripting佔了大部分時間，就是在執行js上，或許有待優化！
7.application
在平常開發上，這個皮膚感覺用到的機率不是很大，但是必須要知道！
1.cookie
2.localstorage和localsession
3.快取
4.IndexedDB
5.Frames
Frames 將頁面上的資源按frame類別進行組織顯示。頂級的top是一個主文件，在top下面是主文件的Fonts、Images、Scripts、Stylesheets等資源。最後一個就是主檔案自身。
這個我個人覺得知道下就可以了，基本很少用到。
8.外掛推薦
關於chorem的外掛或者擴充套件程式，我用的也就幾個，下面簡單推薦下，按需使用，如果不滿足，可以到谷歌應用商店找。
HostAdmin
管理host的一個工具
JSON Editor
json格式化的工具
QR碼發生器
就是把當前頁面的url轉成二維碼，使用場景就是當要使用手機測試的時候，懶得在手機上輸入整個網址，直接掃碼就可在手機訪問！如下圖
vue-devtools
有了這個就能看到下面的擴充套件，使用vue開發的一個神奇，除錯會變得很方便！（用這個外掛切勿長時間停留在這個皮膚，有可能頁面會奔潰）
WEB前端助手(FeHelper)
Performance-Analyser
網頁效能分析工具。這個有用，但是我用的比較少，可能目前的專案沒有那麼嚴格，專業吧！尷尬中。。。
圖片太大，也有點多，我就放這兩張了！大家覺得有用，就下載就好
劃詞翻譯
英文這個是很多程式設計師的硬傷，劃詞翻譯這個能很好幫到大家！
掘金 Chrome 外掛
有這個外掛，掘金每天會根據自己的設定，推送的文章和專案！（發稿前的這幾天，這個外掛改版了，跟圖上會有不一樣，圖就不截了，大家注意下就好）
9.參考連結
隨筆分類 - Chrome開發者工具系列
全新Chrome Devtool Performance使用指南
前端 chrome 瀏覽器除錯總結
你所不知道的 Console
chrome使用技巧（看了定不讓你失望）
10.小結
好了，關於chrome的不完全指南就說到這裡了，上面所提及的內容，可能也就chrome的20-40%功能，但是在日常開發上的使用，可能佔了80%。而且有時候，開發效率不但是編輯器使用的熟練，程式碼精通，瀏覽器使用的順手也是提高效率不可或缺的一環！熟練使用chrome和寫程式碼是一樣的道理，都是要靠自己多練，才能熟悉使用，熟能生巧！
最後，如果大家覺得我有哪裡寫錯了，寫得不好，有其它什麼建議，推薦的的工具！非常歡迎大家補充。希望能讓大家交流意見，相互學習，一起進步！
-------------------------華麗的分割線--------------------
想了解更多，關注關注我的微信公眾號：守候書閣
