web調試優化-chrome開發者工具不徹底指南

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。這個在調試上就比較方便！

關於$的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.這個方式快捷鍵是f10）
三、跳入函數中去（這個方式快捷鍵是f11）
四、跳出當前的函數
五、禁用全部的斷點，中止任何調試
六、程序運行時遇到異常時是否中斷調試

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和寫代碼是同樣的道理，都是要靠本身多練，才能熟悉使用，熟能生巧！
最後，若是你們以爲我有哪裏寫錯了，寫得很差，有其它什麼建議，推薦的的工具！很是歡迎你們補充。但願能讓你們交流意見，相互學習，一塊兒進步！

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