Chrome實用調試技巧

時間 2019-11-19

原文原文鏈接

現在Chrome瀏覽器無疑是最受前端青睞的工具，緣由除了界面簡潔、大量的應用插件，良好的代碼規範支持、強大的V8解釋器以外，還由於Chrome開發者工具提供了大量的便捷功能，方便咱們前端調試代碼，咱們在平常開發中是愈來愈離不開Chrome，是否熟練掌握Chrome調試技巧恐怕也會成爲考量前端技術水平的標杆。javascript

介紹Chrome調試技巧的文章不少，本文結合我本身的開發經驗，但願從實際運用的角度爲你們再一次談一談這些功能，也但願對你們都有所幫助和啓發。html

經常使用快捷鍵

ctrl+p 項目中定位文件，如下查找VueJS庫文件：前端

ctrl+shif+o 文件中定位成員函數，如下定位到VueJS的nextTick接口：vue

Snippets 隨時編寫代碼

Chrome在souces頁面提供snippets一欄，這裏咱們能夠隨時編寫JS代碼，運行結果會打印到控制檯。代碼是全局保存的，咱們在任何頁面，包括新建標籤頁，均可以查看或運行這些代碼。html5

咱們再也不須要爲了運行一小段JS代碼而新建一個HTML頁面。snippets的方便之處在於，你只須要打開chrome就能夠編寫一份任意頁面均可以運行的JS代碼，並且用過snippets都知道，snippets編輯器是能夠和sublime text相媲美的。java

某次項目中，我須要將100多頁的word文檔導入到頁面中。考慮後續樣式編寫，頁面的HTML結構以下：webpack

<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多頁的內容組合成上面的HTML結構太過耗費時間，不太現實，因此我決定使用JS來將文檔內容的標題和段落解析出來，並進行HTML包裝。git

因爲不須要視圖的支持，在snippets編寫這段代碼是最好的選擇，通過幾回調試修改，最終成果以下：github

最後，將Word文檔內容複製到snippets中，執行解析函數，最終的解析出來的HTML結果打印到控制檯：web

snippets中可使用控制檯的copy接口，解析結果直接拷貝到剪切板會更方便

使用snippets來完成這類輕量級工做時，不須要追求代碼的可讀性、可維護性，咱們的代碼只須要在大部分場景下可以正常運行就足夠了。

但爲了知足大部分場景，代碼也是須要反覆調試修改。snippets最實用之處偏偏在於，隨時編寫，隨時調試，隨時修改！

copy 格式化拷貝

在項目開發中，咱們可能須要將後臺數據拷貝到本地，做爲本地數據進行調試。

若是後臺返回沒有格式化的JSON數據，在本地調試中咱們不免會遇到手動修改數據的狀況，格式不美觀的JSON數據修改起來會異常困難。

說到JSON的格式化，咱們首先想到的是JSON.stringify的格式化功能，例如四個空格的縮進：

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

每次格式化JSON數據都要編寫這段代碼實在太麻煩，咱們可使用chrome控制檯的copy接口解決這一問題：

請求項的右鍵菜單中選擇Copy Response拷貝響應內容
命令行中使用copy接口處理數據
獲得格式化的JSON數據

不只僅是對象，copy接口對任何數據均可以進行拷貝，這裏利用的是copy在拷貝數組或對象過程當中，對數據進行美化的功能

iframe 調試

若是咱們使用Webpack服務器工具webpack-dev-server訪問項目的開發頁面，咱們會發現，開發頁面被內嵌到了iframe中進行渲染。

因爲Chrome控制檯默認的上下文是window.top，控制檯中沒法直接對內嵌在iframe的開發頁面進行操做。若是要對iframe中的頁面進行DOM操做或者執行類庫API，咱們要經過contentWindow來獲取到iframe的上下文，而後使用with語句進行調試:

// html
<iframe id="iframe"></iframe>
// 控制檯
with (document.getElementById('iframe').contentWindow) {
inspect(document.body);
new Vue({ /* ... */ });
// do something...
}

以上方法能夠在任意瀏覽器上使用，但若是咱們使用的是Chrome瀏覽器，Chrome控制檯的上下文切換功能會更加方便：

咱們將上下文切換到iframe中，控制檯的代碼都會基於iframe的上下文來執行。若是你用webpack-dev-server進行調試，你會感謝這個功能。

debug 毫無用處？

Chrome控制檯提供debug接口，能夠傳入一個函數，當這個函數下次執行的時候，調試器會自動在該函數中進行斷點調試。

咱們明明能夠在代碼中設置斷點進行調試，爲何要用到debug來設置，是爲了捨棄鼠標用命令行裝逼而已嗎？

在我看來，debug函數還提供了定位功能，它可以讓咱們很快的找到指定的函數。下面演示怎麼調試VueJS的數據驅動，如何找到VueJS數據驅動的代碼入口。

咱們都知道，VueJS的數據驅動是經過defineProperty方法對數據的getter和setter進行封裝，在這個封裝中實現數據變化驅動視圖同步修改的功能。若是咱們想研究VueJS的數據驅動，那麼首先要找到封裝getter和setter的地方，咱們能夠經過debug接口來進行定位。如下用getter方法舉例。

首先咱們知道VueJS實例中的數據都是映射_data屬性中的值：

var vm = new Vue({
data: {
name: 'lxjwlt'
}
});
vm.name === vm._data.name; // true

因此咱們要找的數據實際在VueJS實例的_data屬性中。接下來咱們經過getOwnPropertyDescriptor獲取數據的getter函數：

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

找到了getter函數，咱們就可使用debug接口對其進行斷點調試：

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

這樣，當咱們獲取vm.name數據時，天然會觸發該數據的getter函數，從而觸發斷點調試，自動定位到了函數所在的地方：

往後要調試或者定位公共API，不妨試試Chrome的debug接口功能！

條件breakpoint

在Chrome中，咱們能夠給斷點設置表達式，當表達式爲true時斷點調試纔會生效，這就是條件斷點。

有了條件斷點，咱們在調試代碼的時候可以更加精確的控制代碼斷點的時機，特別是一段代碼會被反覆運行的時候，條件斷點可以跳過大多數狀況，只關注咱們想要的情景。除了這一點外，條件斷點調試還有另外一個用法。

在斷點調試中，咱們每每會檢查當前代碼的執行狀態，若是操做比較繁瑣，那麼咱們可使用條件斷點添加自動化操做，幫助咱們減小一部分工做量。

好比咱們要在斷點發生後查看DOM元素，那麼斷點條件能夠這麼寫：

// 當DOM元素知足某個條件進行斷點，同時查看這個元素
elem.hasAttribute('class') && inspect(elem);

若是不清楚操做的返回值，咱們能夠強行讓該操做返回true，從而不影響斷點的條件判斷：

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

或者分行寫：

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

再好比，在VueJS的調試中，咱們每每須要知道VueJS實例的當前狀態，因此每次觸發斷點調試時，咱們能夠先使用clear接口清除控制檯歷史輸出，再將VueJS實例的當前狀態打印出來：

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

若是在條件斷點中定義變量，變量是定義到全局做用域上，即window對象上的

Async調試

Chrome調試器的Async模式是爲調試異步函數所設計一個功能。

在Promise被普遍應用的今天，咱們都知道，Promise的回調是異步執行的，沒有開啓Async模式前，調動棧只記錄到回調函數自己，咱們沒法找到代碼執行的順序，這給咱們調試帶來巨大的困難。Async模式能夠解決這個問題：

開啓Async模式後，異步函數以前的調用棧都會被記錄下來，並且調用棧中代碼執行狀態也獲得了保留。