爬蟲必備-如何使用Chrome DevTools花式打斷點

共 2871字，需瀏覽 6分鐘

2019-09-03 09:26

來源:https://segmentfault.com/a/1190000016671687

原文：Pause Your Code With Breakpoints
作者：Kayce Basques Chrome DevTools & Lighthouse技術(shù)作家

參考這份指南，結(jié)合自己手上的vue項目進行實踐，可以說對原指南進行了plus，因為實踐過程中會有很多指南之外的新發(fā)現(xiàn)。

主要內(nèi)容包括如下：

預(yù)覽幾種不同的breakpoint類型
代碼行級(Line-of-code)斷點
- 代碼里的某一行上打斷點
- 有條件的行級斷點
- 管理行級斷點
DOM變化級斷點
- 幾種不同的DOM級斷點
XHR/Fetch斷點
事件Listener斷點
Exception 斷點
Function 斷點
- 確保目標(biāo)函數(shù)在作用域中
Feedback

使用breakpoints去為我們的JavaScript代碼打斷點。這個指南涉及了在DevTools上適用的每一種breakpoint類型，并且會講解如何使用并設(shè)置每種類型的斷點。如果是想學(xué)習(xí)如何在Chrome DevTools上調(diào)試代碼，可以看Get Started with Debugging JavaScript in Chrome DevTools

預(yù)覽幾種不同的breakpoint類型

眾人皆知的breakpoint類型是line-of-code。但是line-of-code型breakpoint有的時候沒法設(shè)置（其實就是沒法在代碼左邊點出一個綠點來），或者如果你正在使用一個大型的代碼庫。通過學(xué)習(xí)如何和何時使用這些不同類型的breakpoint debug，會大大節(jié)約你的時間。

斷點類型	當(dāng)你想Pause的時候使用
Line-of-code	代碼具體某一行（其實就是沒法在代碼左邊點出一個綠點來）
Conditional line-of-code	代碼具體某一行，但是只有在一些條件為true時
DOM	在改變或者移除一個DOM節(jié)點或者它的DOM子節(jié)點時
XHR	當(dāng)一個XHR URL包含一個string pattern
Event Listener	在運行了某個特定事件后的代碼上，例如click事件觸發(fā)
Exception	在拋出了一個caught或者uncaught的exception時
Function	當(dāng)一個函數(shù)被調(diào)用時

Line-of-code breakpoints

如果你知道自己想在哪一具體的代碼行檢查代碼，會用到line-of-code breakpoint。DevTools會在這行代碼執(zhí)行前暫停住。

為了在DevTools某一行設(shè)置斷點：

1.點擊Scources tab
2.打開包含你想打斷點的文件
3.跳到那一行
4.點擊那一行的左邊，一個藍色或者綠色的圖標(biāo)

圖1: 在某一行設(shè)置一個斷點

下面的圖是我本地調(diào)試的圖，只有部分有定義，解構(gòu)，回調(diào)，return等有需要process的地方，才可以打斷點。

代碼里生成一個Line-of-code斷點

調(diào)用debugger在那一行暫停。debugger等價于一個line-of-code斷點，這可以讓端點直接出現(xiàn)在代碼中，而不是在DevTools UI中，可以在任何機器上進行debug。

console.log('a');
console.log('b');
debugger;

console.log('c');

有條件的行級斷點

在我們知道自己需要檢查的一個特定代碼行時，使用有條件的行級斷點，但是只有在一些其他滿足時才可以暫停。

如何設(shè)置一個有條件的行級斷點：

1.點擊Sources tab
2.打開代碼文件
3.跳到那一行
4.在那一行Right-click，鼠標(biāo)右鍵（此處有surprise！）
5.選擇Add conditional breakpoint。一個對話框會出現(xiàn)在那一行代碼的下面。
6.在對話框中鍵入條件
7.按下enter去激活breakpoint。一個橘色icon會出現(xiàn)在左邊。

圖2：在某一行設(shè)置條件行級斷點

Add breakPoint是普通的行級斷點，Add conditional breakPoint是有條件的行級斷點。Never Pause Here會讓這里永遠不進斷點。Blackbox Script可以讓當(dāng)前打開的文件黑盒化，用不進入斷點。
點擊Add conditional breakPoint后，會出現(xiàn)dialog：

點擊Blackbox Script后，文件頭部會出現(xiàn)The script is blackboxed in debugger：

在我的代碼中，添加了mediaType==='text'的條件，而mediaType還會有'img','mini'等類型，但是通過添加conditional breakpoint，我可以只在類型是text的時候pause，親測有效。

管理line-of-code斷點

圖3：Breakpoints面板展示了get-started.js的2個斷點

圖4：使用Breakpoints面板去禁用或者移除line-of-code斷點。

可以對單個斷點啟用，禁用，移除；對所有斷點啟用，禁用，移除；對除當(dāng)前斷點外的斷點啟用，禁用，移除。

選中checkbox禁用斷點
右鍵移除斷點
Deactivate斷點，會保留他們激活時的狀態(tài)，這樣方便再次激活，右上角的label為藍色激活狀態(tài)時，Breakpoints全部為Deactive狀態(tài)，白色帶阻塞斜杠時，為斷點激活狀態(tài)。

DOM變化級斷點

Subtree modifications。當(dāng)當(dāng)前選中的節(jié)點的child被移除或新增時觸發(fā)，或者是child的內(nèi)容發(fā)生改變時。在child的節(jié)點屬性發(fā)生變化時不會觸發(fā)，或者當(dāng)前節(jié)點改變時不會觸發(fā)。（親測當(dāng)自己被移除時都不會觸發(fā)）
Attributes modifications。當(dāng)當(dāng)前選中的節(jié)點新增屬性，移除屬性，或者屬性值發(fā)生變化時觸發(fā)。
Node Removal。當(dāng)當(dāng)前選中的節(jié)點被移除時觸發(fā)。

在改變或者移除一個DOM節(jié)點或者它的DOM子節(jié)點時會用到DOM change breakpoint。

圖5：創(chuàng)建一個DOM change breakpoint的上下文菜單

設(shè)置DOM級斷點的步驟如下：

1.單擊Elements tab
2.選中我們想為其設(shè)置breakpoint的元素
3.右鍵元素
4.懸浮在Break on上，選擇Subtree modifications，Attribute modifications或者Node removal。

我會在這樣一段代碼上測試Subtree modifications，Attribute modifications或者Node removal幾個DOM型斷點。

??????????class="url-cover-container">
????????????<cUpload?accept="image/*"?v-model="moment.params.url.cover"?@finish="urlCoverUpload"
?????????????????????v-if="urlCoverUploadShow">
??????????????<Button?type="info">上傳封面Button>
????????????cUpload>
????????????else?:src="moment.params.url.cover"/>
??????????div>

渲染結(jié)果如下:

""?class="c-upload”>
????file"?accept="image/*"?style="display:?none;”>?
????""?type="button"?class="ivu-btn?ivu-btn-info”>
?????????//?iview內(nèi)部組件v-if?else
?????????
????????上傳封面
?????
?????//?v-if為false，因此只保留一個注釋結(jié)束符

Subtree modifications

當(dāng)我點擊上傳按鈕后，一次完整的上傳文件會引起5次DOM節(jié)點的變化：

-6eb44e66=""?class="url-cover-container">
????<div?data-v-6eb44e66=""?class="c-upload">
????????<input?type="file"?accept="image/*"?style="display:?none;">
????????<button?data-v-6eb44e66=""?type="button"?class="ivu-btn?ivu-btn-info">
????????????
????????????
????????????<span>上傳封面span>
????????button>
????????
????div>
div>

-6eb44e66=""?class="url-cover-container">
????<div?data-v-6eb44e66=""?class="c-upload">
????????<input?type="file"?accept="image/*"?style="display:?none;">
????????<button?data-v-6eb44e66=""?type="button"?class="ivu-btn?ivu-btn-info">
????????????
????????????
????????????<span>上傳封面span>
????????button>
????????//?下面的div.c-upload-loading-container就是div.c-upload新增的Descendant
?????????<div?class="c-upload-loading-container">
????????????<div?class="c-upload-loading">
????????????????<svg?data-v-65d9369a=""?viewBox="25?25?50?50"?class="circular">
????????????????????<circle?data-v-65d9369a=""?cx="50"?cy="50"?r="20"?stroke-dasharray="125.66370614359172"?stroke-dashoffset="0"
????????????????????????class="path">circle>
????????????????svg>
????????????div>
????????div>
????????
????div>
div>

-6eb44e66=""?class="url-cover-container">
????<div?data-v-6eb44e66=""?class="c-upload">
????????<input?type="file"?accept="image/*"?style="display:?none;">
????????<button?data-v-6eb44e66=""?type="button"?class="ivu-btn?ivu-btn-info">
????????????
????????????
????????????<span>上傳封面span>
????????button>
????????<div?class="c-upload-loading-container">
????????????<div?class="c-upload-loading">
????????????????<svg?data-v-65d9369a=""?viewBox="25?25?50?50"?class="circular">
????????????????????<circle?data-v-65d9369a=""?cx="50"?cy="50"?r="20"?stroke-dasharray="125.66370614359172"?stroke-dashoffset="-125.66370614359172"
????????????????????????class="path">circle>
????????????????svg>
????????????div>
????????div>
????????//?這里的?注釋DOM子Descendant節(jié)點被移除
????div>
div>

-6eb44e66=""?class="url-cover-container">
????//?下面的img就是div.url-cover-container新增的Child
????-6eb44e66=""?src="http://img.test.weidiango.com/FsHXLY5bu94-s6323xLHFSwh8GGM">
????<div?data-v-6eb44e66=""?class="c-upload">
????????<input?type="file"?accept="image/*"?style="display:?none;">
????????<button?data-v-6eb44e66=""?type="button"?class="ivu-btn?ivu-btn-info">
????????????
????????????
????????????<span>上傳封面span>
????????button>
????????<div?class="c-upload-loading-container">
????????????<div?class="c-upload-loading">
????????????????<svg?data-v-65d9369a=""?viewBox="25?25?50?50"?class="circular">
????????????????????<circle?data-v-65d9369a=""?cx="50"?cy="50"?r="20"?stroke-dasharray="125.66370614359172"?stroke-dashoffset="-125.66370614359172"
????????????????????????class="path">circle>
????????????????svg>
????????????div>
????????div>
????div>
div>

-6eb44e66=""?class="url-cover-container">
????//?這里的div.c-upload就是被移除的Descendant
????-6eb44e66=""?src="http://img.test.weidiango.com/FsHXLY5bu94-s6323xLHFSwh8GGM">
div>

child和descendant區(qū)別是什么？

child僅僅包含一個子節(jié)點；descendant包含多個后代節(jié)點，會有一個孫子節(jié)點的情況，例如上面移除的#comment類型的注釋子節(jié)點。

Attribute Modifications

在3個狀態(tài)間切換，會觸發(fā)class屬性值的變化，因為需要使激活的按鈕高亮。

-6eb44e66=""?name="ivuRadioGroup_1538124450566_3"?class="ivu-radio-group?ivu-radio-group-default?ivu-radio-default?ivu-radio-group-button">
????-6eb44e66=""?class="ivu-radio-wrapper?ivu-radio-group-item?ivu-radio-default">
??????????圖文
????
????-6eb44e66=""?class="ivu-radio-wrapper?ivu-radio-group-item?ivu-radio-default">
??????????小視頻
????
????-6eb44e66=""?class="ivu-radio-wrapper?ivu-radio-group-item?ivu-radio-wrapper-checked?ivu-radio-default?ivu-radio-focus">
???????圖文鏈接
?????

當(dāng)狀態(tài)從圖文鏈接切換到小視頻時，會進入Attribute Modifications斷點，：

-6eb44e66=""?name="ivuRadioGroup_1538124450566_3"?class="ivu-radio-group?ivu-radio-group-default?ivu-radio-default?ivu-radio-group-button">
????-6eb44e66=""?class="ivu-radio-wrapper?ivu-radio-group-item?ivu-radio-default">
????????圖文
????
????-6eb44e66=""?class="ivu-radio-wrapper?ivu-radio-group-item?ivu-radio-wrapper-checked?ivu-radio-default?ivu-radio-focus">
????????小視頻
????
????-6eb44e66=""?class="ivu-radio-wrapper?ivu-radio-group-item?ivu-radio-wrapper-checked?ivu-radio-default">
????????圖文鏈接
????

通過這次DOM Attribute Modification斷點，我們發(fā)現(xiàn)，iview的單選ButtonGroup高亮依賴.ivu-radio-focus，并且會為之前選擇過的radio添加.ivu-raido-wrapper-checked。

因為我們只對圖文鏈接label設(shè)置了Attribute Modification斷點，所以小視頻label的屬性變化不會被檢測到：

node removal

移除一個DOM節(jié)點時會進入斷點。

因此，其實就是subtree modifications中的最后一次DOM變化，把div.c-upload完全移除，只顯示一個上傳后的圖片。但是可能與subtree modifications的斷點提示不一樣，因此我將重新記錄斷點。

-6eb44e66=""?class="url-cover-container">
????//?下面的img就是div.url-cover-container新增的Child
????-6eb44e66=""?src="http://img.test.weidiango.com/FsHXLY5bu94-s6323xLHFSwh8GGM">
????<div?data-v-6eb44e66=""?class="c-upload">
????????<input?type="file"?accept="image/*"?style="display:?none;">
????????<button?data-v-6eb44e66=""?type="button"?class="ivu-btn?ivu-btn-info">
????????????
????????????
????????????<span>上傳封面span>
????????button>
????????<div?class="c-upload-loading-container">
????????????<div?class="c-upload-loading">
????????????????<svg?data-v-65d9369a=""?viewBox="25?25?50?50"?class="circular">
????????????????????<circle?data-v-65d9369a=""?cx="50"?cy="50"?r="20"?stroke-dasharray="125.66370614359172"?stroke-dashoffset="-125.66370614359172"
????????????????????????class="path">circle>
????????????????svg>
????????????div>
????????div>
????div>
div>

-6eb44e66=""?class="url-cover-container">
????//?這里的div.c-upload就是被移除的Descendant
????-6eb44e66=""?src="http://img.test.weidiango.com/FsHXLY5bu94-s6323xLHFSwh8GGM">
div>

確實與之前的不同，直接提醒當(dāng)前node被移除，而不是作為Child或者Descendant被移除。

XHR/Fetch breakpoint

XHR的請求URL包含指定字符串時，使用XHR中斷。當(dāng)XHR調(diào)用send()方法時在對應(yīng)行暫停。

注意：這個特性同樣作用于Fetch請求。

在XHR/Fetch上打斷點的場景，非常適用于請求一個不正確的URL，而且你想很快找到AJAX或者Fetch 源代碼去發(fā)現(xiàn)導(dǎo)致錯誤請求的原因。

設(shè)置一個XHR類型的斷點的步驟如下:

1.單擊Sources tab
2.展開XHR Breakpoints
3.單擊Add breakpoint
4.鍵入你想斷點的string。DevTools會在string出現(xiàn)在任何XHR的請求的URL時進入斷點
5.按下Enter進行確認(rèn)

在XHR Breakpoints中為包含URL中的org的任何請求創(chuàng)建XHR斷點

實驗：

當(dāng)前頁有5個來自crm.test.foo.com的請求，每次都會進入到XHR斷點。

可以對協(xié)議做斷點。例如http，https，ws，wss等等。
可以對域名做斷點。例如github.com，segmentfault.com等等。
可以對端口號做斷點。例如http://test.foo.com:8080，http://test.bar.com:9090等等。
可以對路徑做斷點。例如http://test.foo.com/bar，http://test.foo.com/bar/baz
可以對參數(shù)做斷點。例如http://test.foo.com/bar;type=baz
可以對查詢字符串做斷點。例如http://test.foo.com/bar?type=...
可以對片段做斷點。例如http://test.foo.com/bar/#foo

發(fā)出請求前進行斷點：

會進入到xhr.js中，開心地debug：

Event Listener breakpoints

如果要暫停事件觸發(fā)后運行的事件偵聽器代碼，請使用事件偵聽器斷點。我們可以選擇特定的事件，例如click事件；或者事件類別，例如所有的鼠標(biāo)事件。

1.點擊Sources tab
2.展開Event Listener Breakpoints面板。DevTools展示了一個事件目錄的列表，例如Animation。
3.選中這些事件類別中的一個做斷點，這個斷點會在事件觸發(fā)時進入，或者是選擇事件類別下的一個或多個做斷點。

圖7：為deviceorientation新建一個事件監(jiān)聽斷點

有很多類型的Event Listener。

實驗：

會進入到第三方庫監(jiān)聽事件的代碼，可以用Blackbox Script跳過進入這個文件的斷點，直接進入到我們的監(jiān)聽click事件的業(yè)務(wù)代碼的地方，方便debug。結(jié)合CallStack和Scope，可以提升我們的debug效率。

如果想深入學(xué)習(xí)第三庫的源碼，可以打開斷點，每次都去看一次事件發(fā)生，第三方庫到底做了什么。

Exception breakpoints

當(dāng)我們想在某一行拋出caught or uncaught異常時進入斷點，可以使用exception breakpoint。

1.單擊Sources tab

2.單擊Pause on exceptions上，也就是

。變藍了就表示開啟了，此時默認(rèn)有未捕獲的異常時進入斷點。

3.選中Pause On Caught Exceptions，可以使得捕獲的異常也進入斷點。

圖7：在一個未捕獲的異常處暫停

捕獲到一個CORS異常：

通過異常捕獲斷點，我們可以進入到axios，以及二次封裝的httpclient中，去看Exception是如何被處理的，出現(xiàn)問題時，可以精確定位。

有些時候可能不是我們業(yè)務(wù)代碼的bug，是第三方庫的bug，通過這樣的斷點，我們可以在業(yè)務(wù)代碼沒有問題的情況下，深入到第三方庫找問題（雖然一般都是自己業(yè)務(wù)代碼的問題）。

什么是caught和uncaught的exception？

通過throw，catch對exception做處理的，屬于caught exception
沒有對異常做捕獲的exception，可能導(dǎo)致程序崩潰的exception，就屬于uncaught exception

親測：默認(rèn)捕獲的異常時uncaught類型，開啟Pause on caught exceptions，會讓uncaught和caught類型的均進入斷點。

Function Breakpoints

假設(shè)我們想對某一個函數(shù)做debug的話，例如調(diào)用debug(functionNmae)，functionName是我們想debug的函數(shù)。你可以在你的代碼中像插入console.log()一樣，插入debug()，或這在控制臺里直接輸入debug()。debug()相當(dāng)于在某個函數(shù)的第一行設(shè)置了一個line-of-code breakpoint。

function?sum(a,?b)?{
??let?result?=?a?+?b;?//?DevTools?pauses?on?this?line.
??return?result;
}
debug(sum);?//?Pass?the?function?object,?not?a?string.
sum();

可以用來確保目標(biāo)函數(shù)位于scope中
如果我們想要debug的函數(shù)不在當(dāng)前作用域中，DevTools會拋出一個ReferenceError。

(function?()?{
??function?hey()?{
????console.log('hey');
??}
??function?yo()?{
????console.log('yo');
??}
??debug(yo);?//?This?works.
??yo();
})();
debug(hey);?//?This?doesn't?work.?hey()?is?out?of?scope.

如果從DevTools控制臺調(diào)用debug（），確保目標(biāo)函數(shù)在范圍內(nèi)可能會很棘手，有一個辦法：

1.函數(shù)作用域某一行設(shè)置一個line-of-code breakpoint。
2.觸發(fā)斷點
3.在斷點出暫停時調(diào)用debug()

嗯，上面這個方法很雞肋，親測。

實驗：

function?foo(){
????function?bar()?{
????console.log('bar');
????}
????debug(bar);
????bar();
}
foo();?//?進入斷點
debug(bar);?//?拋出Uncaught?ReferenceError:?bar?is?not?defined

關(guān)于斷點調(diào)試的問題也就是這么多了，掌握這些技巧在后面爬蟲做js逆向的時候會經(jīng)常用到，希望大家能做個基本了解。

以上，便是今天的分享，覺得內(nèi)容對你有所幫助的，還請點個「在看」支持，謝謝各位。