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代碼片斷，你能夠直接拿去使用。