20個Chrome DevTools調試技巧

譯者按： Chrome DevTools很強大，甚至可以替代IDE了！

• 原文: Art of debugging with Chrome DevTools

為了保證可讀性，本文采用意譯而非直譯。另外，本文版權歸原作者所有，翻譯僅用於學習。

谷歌開發者工具提供了一系列的功能來幫助開發者高效Debug網頁應用，讓他們可以更快地查找和修復bug。在谷歌的開發者工具中，有非常多有用的小工具，但是很多開發者並不知道。通過這篇文章，我把我常用的那些高效Debug的Chrome開發者工具的功能分享給大家。

簡潔起見，接下來我會使用開發者工具來指代谷歌開發者工具。

在我們開始之前，你需要做一些准備工作。

使用金絲雀版

如果你想使用谷歌最新的版本和開發者工具，你可以下載金絲雀版本，甚至把它設置為開發默認打開的瀏覽器。金絲雀版本旨在為早期接受者提供最新的更新。它可能不穩定，但是大多數時候是沒問題的。你要習慣去使用最新最強的谷歌瀏覽器。

1. 開啟開發者工具的實驗性功能

你可以到chrome://flags頁面，然后開啟Developer Tools experiments選項。

當開啟后，在開發者工具的設置頁面，可以發現多了一個Experiments選項。如果我使用的一些功能你沒有看到，那么請到Experiments窗口打開。

2.超級實驗性功能

如果我使用到的功能在Experiments列表沒有，那么它可能是一個WIP功能(WIP指working in progress)。你可以這樣開啟：頁面處在Experiments界面，連續敲擊shift鍵6次來開啟WIP功能。

Console

當Debug的時候，我們絕大部分時間是在和Console打交道。我們往往在代碼中插入很多Console logs，通過打印變量值來debug。鑒於Console對於我們這么重要，很有必要了解所有開發者工具提供的相關的APIs和快捷鍵。

3. 總是打印對象

我的第一個建議其實和開發者工具沒有關系，而是我一直使用的一個技巧。在使用console.log();的時候，不僅僅打印變量，而是要打印對象，用大括號({})將變量包圍起來。這樣的優點是不僅會把變量的值打印，同時還會將變量名打印出來。

4. 使用console.table來打印多條目數據

如果你要打印的變量是一個數組，每一個元素都是一個對象。我建議你使用console.table來打印，其表格化的呈現更加美觀易讀。

5. 給log加點顏色

log有時候變得非常多，包含你自己的、一些第三方擴展或者瀏覽器的logs。除了使用過濾器(filter)以外，你還可以使用顏色來更好地區分。

6. $ 和 $$

如果你在console下沒有任何庫使用$和$$，那么你可以使用它們分別作為document.querySelector() 和 document.querySelectorAll()的快捷鍵。

除了提供了一個更加快捷的方式外，還有一個好處，$$返回一個數組，而不是array-like的NodeList. 所以你可以直接使用map, reduce和filter 函數。

你可以使用$$檢查頁面中的無效鏈接：

Promise
 .all(
 $$('a')
 .map(link => link.href)
 .map(href => fetch(href))
 )
 .then(() => console.log('All links working'))
 .catch(() => console.error('Some links are broken'));

 

7. $0

如果你想引用某個DOM元素，使用$0。$0指向你當前在Element中選中的元素。如果指定了$0，$1指向之前選中的元素。以此類推，直到$4都可以使用。

8. $_

$_記錄了最后一次在Console計算的表達式。

9. getEventListeners()

getEventListeners(domElement) 返回在DOM元素上注冊的所有的事件。請看下面的例子：

你也許注意到了，當我在console里輸入表達式的時候，其結果立即被計算出來了。你可以看到我並沒有敲擊Enter鍵，而結果已經顯示出來。這個是金絲雀版本的一個新功能，叫做”Eager Evaluation”。

10. debug(fn)

在上面的例子中，如果你想在點擊按鈕后的執行過程中暫停，你可以使用debug函數。debug(fn)接收一個函數作為參數，當每次該函數被調用時，Debugger就會在該函數的第一行中斷執行。

想象一下你要debug一個按鈕的問題，但是你不知道這個按鈕對應的事件函數在代碼中什么位置。除了去大量的源代碼中慢慢尋找之外，還有一個巧妙的方法。使用getEventListeners函數，然后將debug方法注入進去。這樣，當你點擊按鈕的時候，就會在該函數的第一行停下來。

11. copy(obj)

copy(anything) 是一個很有用的工具函數方便你將任何東西拷貝到系統的粘貼板暫存。

給copy函數傳入一個沒有格式的JSON，會返回格式化的結果：

12. Top-level await

async/await 使得異步操作變得更加容易和可讀。唯一的問題在於await需要在async函數中使用。如果我們要在DevTools的控制台使用，需要一些特殊的處理，使用Immediately Invoked Async Function Expression (IIAFE). 一點都不方便。好在DevTools已經支持直接使用await了。

Debugging in the Sources panel

在source面板，使用breakpoints，stepping-into, stepping-over等方式，你可以很好地掌控程序的執行狀態，來發現代碼問題。接下里我不會介紹大家都知道的基礎內容，而是一些我經常使用的建議和技巧。

13. 開啟 auto-pretty print

在金絲雀版本的實驗模式下，你可以開啟自動美化代碼模式。

14. 使用條件斷點在生產環境中注入console logs

斷點是一個很棒的功能。但還有一個更棒的：條件斷點。只有當設定的條件滿足的時候，中斷才會執行。也就是說DevTools並不會每次都中斷程序的執行，而只是在你想要它中斷的時候才中斷。想了解更多：查看這里.

在生產環境下，因為不能修改源代碼，我喜歡使用條件斷點來注入console.log。如果我的斷點僅僅是一個console.log，DevTools不會中斷，因為console.log返回undefined,，是一個false的值。但是它會執行我注入的表達式，可以看到輸出結果。

為什么不直接使用普通的斷點，並且查看變量呢？有時候我並不想這樣做。比如，當我在分析那些頻繁執行的操作，例如觸摸或則滑動。我並不想每一次都導致Debugger觸發程序中斷，但是我想看到程序輸出的結果。

15. 暫停UI在Hover狀態下的展示結果

我們很難去檢查一個只有在Hover狀態下展示的元素。比如，如何去檢查一個tooltip？如果你右鍵並選擇檢查，元素已經消失了。那么有辦法嗎？

我是這么操作的：

1. 打開sources面板
2. 顯示tooltip
3. 使用快捷鍵來暫停腳本執行(將鼠標停留在暫停的圖標上查看快捷鍵)
4. 回到Elements面板，然后像通常一樣去檢查元素

16. XHR breakpoints

如果想要理解一個請求是如何執行的，可以使用sources面板的XHR breakpoints。

17. 使用DevTools作為IDE

DevTools的source面板可以說相當強大。你可以快速查找，跳轉到某一行，某個函數，執行一段代碼，使用多行光標等等。這些功能在這篇medium文章中有詳細描述。

既然如此，為啥不把整個開發都搬到這里呢。這樣就不需要浪費時間切換IDE和瀏覽器了。

如果你有一個使用create-react-app或則vue-cli構建的項目，你可以直接把整個文件夾拖到Sources面板下。DevTools會自動對所有文件做映射。所以，你可以在DevTools下修改文件並立即查看。這樣，整個開發效率，特別是Debugging效率絕對提高了。

18. 使用network overrides來簡單調試生產代碼

如果你正在Debugging一個生產環境下面的bug，你可以使用network overrides來調試，而不用在本地搭建整個配置。

你可以很容易將任何遠程的資源下載一份本地的版本，然后可以在DevTools下編輯，並且DevTools會更新展示你編輯后的文件。

在生產環境下，也可以很容易Debugging，並且做一些性能上的測試也變得容易。

19. Nodejs debugging

如果你想使用DevTools的Debugger來debug Node.js應用，你可以使用--inspect-brk flag來開啟：

node --inspect-brk script.js

跳轉到chrome://inspect頁面，在Remote Target選項，可以看到Node程序。

並且，在DevTools中你會看到一個綠色的Node圖標，點擊圖標會打開針對Node的Chrome Debugger。

如果你想要用DevTools Debugger來debug你的單元測試，你需要這樣調用：

node --inspect-brk ./node_modules/.bin/jest

不過這樣做其實很麻煩，我們需要自己找到相應的路徑。 GoogleChromeLabs 最近發布了一個新的工具非常好用，叫做：ndb。使用ndb，你只需要：

ndb npx jest

如果你有一個自定義的腳本，你可以這樣調用：

ndb npm run unit

更妙的是，如果你在一個有配置package.json的項目下調用ndb，他甚至會自動分析package.json中的腳本，方便你直接使用DevTools。

20. 使用Snippets來輔助Debugging

DevTools提供了一個可以創建和保存小段代碼的工具，我很喜歡用它們來加速我的工作。比如lodashify — 可以快速給任何應用添加lodash。

(function () {
 'use strict';

 var element = document.createElement('script');
 element.src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js";
 element.type = "text/javascript";
 document.head.appendChild(element);
})();

另一個小的工具函數式用來增強對象的屬性，每次被訪問或則修改，它都會提供給我充分的信息，比如誰訪問了，誰更改了它。在Debugging的時候，非常有用。

const traceProperty = (object, property) => {
 let value = object[property];
 Object.defineProperty(object, property, {
 get () {
 console.trace(`${property} requested`);
 return value;
 },
 set (newValue) {
 console.trace(`setting ${property} to `, newValue);
 value = newValue;
 },
 })
};

還有很多非常有用的devtools代碼片段，你可以直接拿去使用。