摘要：之前寫過前端答疑開發(fā)者工具正確食用看網(wǎng)頁源碼，其中涉及到了和兩個標(biāo)簽。工具欄提供了，路徑過濾支持正則，類型過濾，拿響應(yīng)其實(shí)很簡單啊，找到頁面的請求，然后看里面不就是嗎看這個其實(shí)也是昨天碰到的，有個朋友說他下載文件失敗。

之前寫過前端答疑-chrome開發(fā)者工具正確食用-看網(wǎng)頁源碼，其中涉及到了 Sources 和 Network 兩個標(biāo)簽。

不曾想現(xiàn)在的世界越來越看不懂了
昨天吧，一個朋友突然聯(lián)系我了（應(yīng)該是校友吧，不過我沒見過本人，大我十屆？我也是奔三的人了，突然好難過）。
問我360 瀏覽器如何調(diào)試 js。這個時候應(yīng)該配圖了[黑人問號臉]。調(diào)試應(yīng)該是每個開發(fā)必會的技能吧，即使不會，難道沒有網(wǎng)絡(luò)嗎？網(wǎng)上連教程都沒有嗎？

那么好了，基于上面的吐槽，我們開始今天內(nèi)容。

chrome 開發(fā)者工具之 Console
主要就是打日志，然后分析日志

chrome 開發(fā)者工具之 Sources
主要是調(diào)試js。包括調(diào)試工具（步入、步出、調(diào)用堆棧等）

chrome 開發(fā)者工具之 Element
主要是查看 DOM，以及修改 CSS。
目前來說不如jQuery時代用的多，我基本就是改css了。

chrome 開發(fā)者工具之 Network
看每次請求和響應(yīng)，包括參數(shù)，headers這些。

chrome 開發(fā)者工具之 Application
一些前端本地存儲。cookie、localstroage 等等

log 是一個開發(fā)利器。 hello world 大概就是我們的每個人的第一條 log。

java system.out.println("hello world")
python print("hello world")
js console.log("hello world") 當(dāng)然，有的時候我們會使用 alert 來打。這里推薦一下 fundebug，一行代碼搞定BUG監(jiān)控，也可以打log，有一部分的免費(fèi)額度。

F12 或者 Control+Shift+i（PC平臺）/ Alt+Command+i（Mac平臺）打開我們的控制臺

JavaScript 原生中默認(rèn)是沒有 Console 對象。是宿主對象提供的，也就是說console 是瀏覽器提供的內(nèi)置對象。
用于訪問調(diào)試控制臺, 在不同的瀏覽器里效果可能不同。
IE低版本沒有（當(dāng)然你裝了高版本，然后打開控制臺他又能用console了）。

提供了日志級別api。可以方便我們根據(jù)類型，更快的定位需要關(guān)注的問題。

console.log("普通-文本")與console.dir("普通-對象")
不同之處在于輸出dom節(jié)點(diǎn)對象類型是會有一些差別。

console.info("信息") console.log 的別名，輸出信息，部分瀏覽器會增加一個藍(lán)色標(biāo)志。

console.warn("警告") 黃色警告標(biāo)識，也有堆棧信息。

console.error("錯誤") 輸出信息時，在最前面加一個紅色的叉，表示出錯，同時會顯示錯誤發(fā)生的堆棧。

console.debug("調(diào)試") 從 Chromium 58 開始，Chromium 瀏覽器只有勾選了控制臺中的 “Verbose” 日志級別才可見。

支持多種寫法

多參數(shù)
console.log("auther:", "lilnong.top")

占位符格式，支持的占位符有：字符（%s）、整數(shù)（%d或%i）、浮點(diǎn)數(shù)（%f）、可展開的DOM（%o）、列出DOM的屬性（%O）、根據(jù)提供的css樣式格式化字符串（%c）
console.log("auther:%s", "lilnong.top")
console.log("%cauther:%s", "color: red; font-size: 20px","lilnong.top"); 更適合封裝起來使用。

console.assert(location.protocol=="https:", "https防止劫持哦~") 接受兩個參數(shù)，第一個參數(shù)是表達(dá)式，第二個參數(shù)是字符串。只有當(dāng)?shù)谝粋€參數(shù)為false，才會輸出第二個參數(shù)，否則不會有任何結(jié)果。

console.clear() 清除當(dāng)前控制臺的所有輸出。

console.count("count") 提供計(jì)數(shù)功能。比如說有個排序算法，我們想統(tǒng)計(jì)時間復(fù)雜度。
Console.countReset() 我們也可以重置指定標(biāo)簽的計(jì)數(shù)器值。

console.group("第一層");console.groupEnd(); 提供將顯示的信息分組功能，可以把信息進(jìn)行折疊和展開。
console.groupCollapsed("第一層");console.groupEnd(); 同上，不同點(diǎn)是默認(rèn)是折疊狀態(tài)

console.table(arr); 提供將復(fù)合類型的數(shù)據(jù)轉(zhuǎn)為表格顯示。還可以進(jìn)行排序等操作。

console.time("task");console.timeEnd("task"); 提供了統(tǒng)計(jì)代碼執(zhí)行用時的功能。不準(zhǔn)，波動會比較奇怪，多統(tǒng)計(jì)，然后求平均值吧

console.trace(); 追蹤函數(shù)的調(diào)用過程，也可以理解為把打印堆棧。

上面介紹了API。接下來我們介紹一下面板的使用。

控制的是，級別篩選欄的隱藏與顯示。

messages 是所有消息類型

user messages 是指所有用戶日志，瀏覽器產(chǎn)生的不算。如下，產(chǎn)生的錯誤就不算

document.body.addEventListener("touchmove", (e)=>e.preventDefault())
// VM275:1 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

errors 是指錯誤級別的日志

warning 是指警告級別的日志

info 是指信息級別的日志

verbose 是指調(diào)試級別的日志

是指清空當(dāng)前面板內(nèi)容。
快捷鍵 ctrl+l 對應(yīng)的命令是 console.clear();

是指當(dāng)前的作用域。如果有iframe的話，可以切換作用域?yàn)閷?yīng)的iframe。然后就可以快樂的在控制臺調(diào)用iframe里面的變量了。

創(chuàng)建一個動態(tài)監(jiān)聽。實(shí)時監(jiān)聽一個變量，如果變化了，這里也會變化

通過關(guān)鍵詞過濾日志

描述有多少條記錄被隱藏

設(shè)置功能，里面是一些控制開關(guān)。

隱藏網(wǎng)絡(luò)請求相關(guān)的錯誤，比如404

持續(xù)日志功能。正常來講，我們刷新頁面或者跳轉(zhuǎn)其他頁面，日志會清空。開始持續(xù)日志后，跳轉(zhuǎn)刷新等操作不會清空日志。更方便我們比對兩次請求的差異

配合 top，只顯示當(dāng)前作用域內(nèi)的日志。

把一些錯誤合并到一起。和默認(rèn)的合并效果不太一樣。

為每次請求的打印日志

可以理解為及早求值，當(dāng)你在控制臺輸入一個表達(dá)式的時候，下面會出現(xiàn)他的結(jié)果，這個時候你還沒有按下回車

提供記錄你歷史輸入，方便快捷輸入選擇。

相關(guān)的應(yīng)該只有debugger了吧。
當(dāng)控制臺是打開狀態(tài)，走到debugger會進(jìn)入調(diào)試模式。反之沒打開控制臺，不會進(jìn)入調(diào)試模式。
測試地址，為什么會有 ajax 的 debugger 測試呢？因?yàn)閱栁业哪莻€人，說兼聽不到ajax的。

這里介紹兩部分 代碼區(qū)和調(diào)試工具區(qū)

如下圖所示，可以看到我們當(dāng)前程序的代碼。
在左邊行數(shù)顯示的位置我們可以直接打斷點(diǎn)，也可以右鍵，執(zhí)行更多斷點(diǎn)操作

Add breakpoint 就是設(shè)置斷點(diǎn)，和單擊效果是一樣的

Add conditional breakpoint 添加條件斷點(diǎn)，可以滿足一定的條件再觸發(fā)

Add logpoint 是打一個日志點(diǎn)，每次執(zhí)行到這里可以打日志

Never pause here 在當(dāng)前點(diǎn)增加一個條件為false的條件斷點(diǎn)

Blackbox script 屏蔽當(dāng)前文件，比如這個文件中有debugger也不會執(zhí)行斷點(diǎn)。常用于一些開源類庫，打斷點(diǎn)不希望跳入到里面。

如果一行有多個操作，會在后面出現(xiàn)斷點(diǎn)標(biāo)識

shift+單擊，可以臨時關(guān)閉當(dāng)前斷點(diǎn)

下面我們介紹一下每個按鈕的功能

當(dāng)有斷點(diǎn)的時候是個三角，意思是放過這個斷點(diǎn)。
當(dāng)無斷點(diǎn)的時候會在下次調(diào)用的時候停住。

下一行，如果是方法不會跳進(jìn)去

步入，如果是方法，可以跳進(jìn)去

步出，跳出當(dāng)前方法

下一步（我沒用過）

當(dāng)前狀態(tài)是捕獲調(diào)試。藍(lán)色的時候是不捕獲調(diào)試，會跳過 debugger。
方便你打了斷點(diǎn)，然后又想測試效果

這個是捕獲錯誤。當(dāng)前是不捕獲。

工具欄介紹完了，我們看一下其他區(qū)域

Threads 當(dāng)前線程

Watch 可以監(jiān)聽一些常用變量，方便排查問題

Call Stack 可以理解為當(dāng)前的調(diào)用堆棧信息

Scope 為當(dāng)前上文環(huán)境中變量的值，切換call stack，scope中變量也會切換。

Breakpoints 是當(dāng)前所有的斷點(diǎn)

XHR/fetch Breakpoints 對接口訪問的斷點(diǎn)

DOM Breakpoints 為所有dom上的斷點(diǎn)，可以監(jiān)聽subtree modified、Node removed、attribute modified

Global Listeners 所有已監(jiān)聽的事件

Event Listener Breakpoints 所有Event的監(jiān)聽

vue中，created打個斷點(diǎn)，然后把this綁在全局方便排查問題

某些不確定的地方打斷點(diǎn)，然后單步調(diào)試

異步內(nèi)容打斷點(diǎn)，查看返回是否正常

左邊部分是我們的DOM樹，一般來說看看層級。具體找DOM的活，我們都是在對應(yīng)的元素上右鍵-檢查。

可以改屬性，標(biāo)簽

右鍵可以操作

右邊部分是我們當(dāng)前DOM的css相關(guān)，一般來說可以在這邊改改樣式，看看效果。支持鍵盤上下切換當(dāng)前值。

還有一些便捷操作的控件

顏色選擇

box-shadow

微調(diào)css，及時可見

查看當(dāng)前盒子模型

當(dāng)前DOM所有事件

查詢當(dāng)前DOM樣式繼承問題。

查詢當(dāng)前DOM最重計(jì)算值

看接口的返回值

看接口的請求頭，響應(yīng)頭

查看資源的加載速度

查看資源的大小，緩存情況，響應(yīng)情況（cdn、waiting 等時間）

該功能為長日志功能，正常來說看到的都是當(dāng)前頁面的。
如果跳轉(zhuǎn)頁面或者說刷新之后就沒了。通過打開 preserve log，我們可以長久的保留內(nèi)容。
那它有什么作用呢？

我們可以看到一些中間頁的跳轉(zhuǎn)，省去了抓包的麻煩。

可以和上個頁面的數(shù)據(jù)比對。

前端緩存也是比較麻煩的一個事情。經(jīng)常需要強(qiáng)刷，清緩存一頓的操作。
當(dāng)我們打開 disable cache 之后，我們就不需要關(guān)了，每次都是無緩存的加載

比如說在測試 PWA?；蛘哒f弱網(wǎng)的情況下的一種快速配置。

請求比較多的頁面，我們有可能需要過濾。
工具欄提供了，路徑過濾（支持正則），類型過濾（All,XHR,js），

其實(shí)很簡單啊，找到頁面的請求，然后看 response 里面不就是嗎？

這個其實(shí)也是昨天碰到的，有個朋友說他下載文件失敗。我打開看到他response的header的Content-Disposition寫錯了。

可以查看對應(yīng)數(shù)據(jù)，更改對應(yīng)數(shù)據(jù)，還可以清空。

20個Chrome DevTools調(diào)試技巧 --Fundebug