如今Chrome瀏覽器無(wú)疑是最受前端青睞的工具，原因除了界面簡(jiǎn)潔、大量的應(yīng)用插件，良好的代碼規(guī)范支持、強(qiáng)大的V8解釋器之外，還因?yàn)镃hrome開發(fā)者工具提供了大量的便捷功能，方便我們前端調(diào)試代碼，我們?cè)谌粘ｉ_發(fā)中是越來(lái)越離不開Chrome，是否熟練掌握Chrome調(diào)試技巧恐怕也會(huì)成為考量前端技術(shù)水平的標(biāo)桿。

介紹Chrome調(diào)試技巧的文章很多，本文結(jié)合我自己的開發(fā)經(jīng)驗(yàn)，希望從實(shí)際運(yùn)用的角度為大家再一次談一談這些功能，也希望對(duì)大家都有所幫助和啟發(fā)。

常用快捷鍵

ctrl+p項(xiàng)目中定位文件，以下查找VueJS庫(kù)文件：

ctrl+shif+o文件中定位成員函數(shù)，以下定位到VueJS的nextTick接口：

Snippets 隨時(shí)編寫代碼

Chrome在souces頁(yè)面提供snippets一欄，這里我們可以隨時(shí)編寫JS代碼，運(yùn)行結(jié)果會(huì)打印到控制臺(tái)。代碼是全局保存的，我們?cè)谌魏雾?yè)面，包括新建標(biāo)簽頁(yè)，都可以查看或運(yùn)行這些代碼。

我們不再需要為了運(yùn)行一小段JS代碼而新建一個(gè)HTML頁(yè)面。snippets的方便之處在于，你只需要打開chrome就可以編寫一份任意頁(yè)面都可以運(yùn)行的JS代碼，而且用過snippets都知道，snippets編輯器是可以和sublime text相媲美的。

某次項(xiàng)目中，我需要將100多頁(yè)的word文檔導(dǎo)入到頁(yè)面中?？紤]后續(xù)樣式編寫，頁(yè)面的HTML結(jié)構(gòu)如下：

<div class="help-page_row">
  <h3 class="help-page_title">title</h3>
  <p class="help-page_desc">paragraph</p>
  <p class="help-page_desc">paragraph</p>
</div>

手工將100多頁(yè)的內(nèi)容組合成上面的HTML結(jié)構(gòu)太過耗費(fèi)時(shí)間，不太現(xiàn)實(shí)，所以我決定使用JS來(lái)將文檔內(nèi)容的標(biāo)題和段落解析出來(lái)，并進(jìn)行HTML包裝。

由于不需要視圖的支持，在snippets編寫這段代碼是最好的選擇，經(jīng)過幾次調(diào)試修改，最終成果如下：

最后，將Word文檔內(nèi)容復(fù)制到snippets中，執(zhí)行解析函數(shù)，最終的解析出來(lái)的HTML結(jié)果打印到控制臺(tái)：

snippets中可以使用控制臺(tái)的copy接口，解析結(jié)果直接拷貝到剪切板會(huì)更方便

使用snippets來(lái)完成這類輕量級(jí)工作時(shí)，不需要追求代碼的可讀性、可維護(hù)性，我們的代碼只需要在大部分場(chǎng)景下能夠正常運(yùn)行就足夠了。

但為了滿足大部分場(chǎng)景，代碼也是需要反復(fù)調(diào)試修改。snippets最實(shí)用之處恰恰在于，隨時(shí)編寫，隨時(shí)調(diào)試，隨時(shí)修改！

copy 格式化拷貝

在項(xiàng)目開發(fā)中，我們可能需要將后臺(tái)數(shù)據(jù)拷貝到本地，作為本地?cái)?shù)據(jù)進(jìn)行調(diào)試。

如果后臺(tái)返回沒有格式化的JSON數(shù)據(jù)，在本地調(diào)試中我們難免會(huì)遇到手動(dòng)修改數(shù)據(jù)的情況，格式不美觀的JSON數(shù)據(jù)修改起來(lái)會(huì)異常困難。

說到JSON的格式化，我們首先想到的是JSON.stringify的格式化功能，例如四個(gè)空格的縮進(jìn)：

JSON.stringify({name: 'lxjwlt'}, null, 4);

每次格式化JSON數(shù)據(jù)都要編寫這段代碼實(shí)在太麻煩，我們可以使用chrome控制臺(tái)的copy接口解決這一問題：

1.請(qǐng)求項(xiàng)的右鍵菜單中選擇Copy Response拷貝響應(yīng)內(nèi)容
2.命令行中使用copy接口處理數(shù)據(jù)
3.得到格式化的JSON數(shù)據(jù)

不僅僅是對(duì)象，copy接口對(duì)任何數(shù)據(jù)都可以進(jìn)行拷貝，這里利用的是copy在拷貝數(shù)組或?qū)ο筮^程中，對(duì)數(shù)據(jù)進(jìn)行美化的功能

iframe 調(diào)試

如果我們使用Webpack服務(wù)器工具webpack-dev-server訪問項(xiàng)目的開發(fā)頁(yè)面，我們會(huì)發(fā)現(xiàn)，開發(fā)頁(yè)面被內(nèi)嵌到了iframe中進(jìn)行渲染。

由于Chrome控制臺(tái)默認(rèn)的上下文是window.top，控制臺(tái)中無(wú)法直接對(duì)內(nèi)嵌在iframe的開發(fā)頁(yè)面進(jìn)行操作。如果我們想對(duì)iframe中的頁(yè)面進(jìn)行DOM操作，或者執(zhí)行類庫(kù)API，首先我們通過contentWindow來(lái)獲取到iframe的上下文，然后使用with語(yǔ)句進(jìn)行調(diào)試:

// html
<iframe id="iframe"></iframe>

// 控制臺(tái)
with (document.getElementById('iframe').contentWindow) {
  inspect(document.body);

  new Vue({ /* ... */ });

  // do something...
}

以上方法可以在任意瀏覽器上使用，但如果我們使用的是Chrome瀏覽器，Chrome控制臺(tái)的上下文切換功能會(huì)更加方便：

我們將上下文切換到iframe中，控制臺(tái)的代碼都會(huì)基于iframe的上下文來(lái)執(zhí)行。如果你用webpack-dev-server進(jìn)行調(diào)試，你會(huì)感謝這個(gè)功能。

debug 毫無(wú)用處？

Chrome控制臺(tái)提供debug接口，可以傳入一個(gè)函數(shù)，當(dāng)這個(gè)函數(shù)下次執(zhí)行的時(shí)候，調(diào)試器會(huì)自動(dòng)在該函數(shù)中進(jìn)行斷點(diǎn)調(diào)試。

我們明明可以在代碼中設(shè)置斷點(diǎn)進(jìn)行調(diào)試，為什么要用到debug來(lái)設(shè)置，是為了舍棄鼠標(biāo)用命令行裝逼而已嗎？

在我看來(lái)，debug函數(shù)還提供了定位功能，它能夠讓我們很快的找到指定的函數(shù)。下面演示怎么調(diào)試VueJS的數(shù)據(jù)驅(qū)動(dòng)，如何找到VueJS數(shù)據(jù)驅(qū)動(dòng)的代碼入口。

我們都知道，VueJS的數(shù)據(jù)驅(qū)動(dòng)是通過defineProperty方法對(duì)數(shù)據(jù)的getter和setter進(jìn)行封裝，在這個(gè)封裝中實(shí)現(xiàn)數(shù)據(jù)變化驅(qū)動(dòng)視圖同步修改的功能。如果我們想研究VueJS的數(shù)據(jù)驅(qū)動(dòng)，那么首先要找到封裝getter和setter的地方，我們可以通過debug接口來(lái)進(jìn)行定位。以下用getter方法舉例。

首先我們知道VueJS實(shí)例中的數(shù)據(jù)都是映射_data屬性中的值：

var vm = new Vue({
  data: {
    name: 'lxjwlt'
  }
});

vm.name === vm._data.name; // true

所以我們要找的數(shù)據(jù)實(shí)際在VueJS實(shí)例的_data屬性中。接下來(lái)我們通過getOwnPropertyDescriptor獲取數(shù)據(jù)的getter函數(shù)：

Object.getOwnPropertyDescriptor(vm._data, "name").get;

找到了getter函數(shù)，我們就可以使用debug接口對(duì)其進(jìn)行斷點(diǎn)調(diào)試：

debug(Object.getOwnPropertyDescriptor(vm._data, "name").get)

這樣，當(dāng)我們獲取vm.name數(shù)據(jù)時(shí)，自然會(huì)觸發(fā)該數(shù)據(jù)的getter函數(shù)，從而觸發(fā)斷點(diǎn)調(diào)試，自動(dòng)定位到了函數(shù)所在的地方：

日后要調(diào)試或者定位公共API，不妨試試Chrome的debug接口功能！

條件breakpoint

在Chrome中，我們可以給斷點(diǎn)設(shè)置表達(dá)式，當(dāng)表達(dá)式為true時(shí)斷點(diǎn)調(diào)試才會(huì)生效，這就是條件斷點(diǎn)。

有了條件斷點(diǎn)，我們?cè)谡{(diào)試代碼的時(shí)候能夠更加精確的控制代碼斷點(diǎn)的時(shí)機(jī)，特別是一段代碼會(huì)被反復(fù)運(yùn)行的時(shí)候，條件斷點(diǎn)能夠跳過大多數(shù)情況，只關(guān)注我們想要的情景。除了這一點(diǎn)外，條件斷點(diǎn)調(diào)試還有另一個(gè)用法。

在斷點(diǎn)調(diào)試中，我們往往會(huì)檢查當(dāng)前代碼的執(zhí)行狀態(tài)，如果操作比較繁瑣，那么我們可以使用條件斷點(diǎn)添加自動(dòng)化操作，幫助我們減少一部分工作量。

比如我們要在斷點(diǎn)發(fā)生后查看DOM元素，那么斷點(diǎn)條件可以這么寫：

// 當(dāng)DOM元素滿足某個(gè)條件進(jìn)行斷點(diǎn)，同時(shí)查看這個(gè)元素
elem.hasAttribute('class') && inspect(elem);

如果不清楚操作的返回值，我們可以強(qiáng)行讓該操作返回true，從而不影響斷點(diǎn)的條件判斷：

elem.hasAttribute('class') && (inspect(elem) || true);

或者分行寫：

if (elem.hasAttribute('class')) {inspect(elem); true;}

再比如，在VueJS的調(diào)試中，我們往往需要知道VueJS實(shí)例的當(dāng)前狀態(tài)，所以每次觸發(fā)斷點(diǎn)調(diào)試時(shí)，我們可以先使用clear接口清除控制臺(tái)歷史輸出，再將VueJS實(shí)例的當(dāng)前狀態(tài)打印出來(lái)：

vm.sum > 4 && (clear() || vm.$log() || true);

如果在條件斷點(diǎn)中定義變量，變量是定義到全局作用域上，即window對(duì)象上的

Async調(diào)試

Chrome調(diào)試器的Async模式是為調(diào)試異步函數(shù)所設(shè)計(jì)一個(gè)功能。

在Promise被廣泛應(yīng)用的今天，我們都知道，Promise的回調(diào)是異步執(zhí)行的，沒有開啟Async模式前，調(diào)動(dòng)棧只記錄到回調(diào)函數(shù)本身，我們無(wú)法找到代碼執(zhí)行的順序，這給我們調(diào)試帶來(lái)巨大的困難。Async模式可以解決這個(gè)問題：

開啟Async模式后，異步函數(shù)之前的調(diào)用棧都會(huì)被記錄下來(lái)，而且調(diào)用棧中代碼執(zhí)行狀態(tài)也得到了保留。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論