譯者按： Chrome DevTools很強(qiáng)大，甚至可以替代IDE了！

• 原文: Art of debugging with Chrome DevTools
• 譯者: Fundebug

為了保證可讀性，本文采用意譯而非直譯。另外，本文版權(quán)歸原作者所有，翻譯僅用于學(xué)習(xí)。

小編推薦：Fundebug專注于JavaScript、微信小程序、微信小游戲，Node.js和Java線上bug實(shí)時(shí)監(jiān)控。真的是一個(gè)很好用的bug監(jiān)控服務(wù)，眾多大佬公司都在使用。

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

簡潔起見，接下來我會(huì)使用開發(fā)者工具來指代谷歌開發(fā)者工具。

在我們開始之前，你需要做一些準(zhǔn)備工作。

使用金絲雀版

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

1. 開啟開發(fā)者工具的實(shí)驗(yàn)性功能

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

當(dāng)開啟后，在開發(fā)者工具的設(shè)置頁面，可以發(fā)現(xiàn)多了一個(gè)Experiments選項(xiàng)。如果我使用的一些功能你沒有看到，那么請(qǐng)到Experiments窗口打開。

2.超級(jí)實(shí)驗(yàn)性功能

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

Console

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

3. 總是打印對(duì)象

我的第一個(gè)建議其實(shí)和開發(fā)者工具沒有關(guān)系，而是我一直使用的一個(gè)技巧。在使用console.log();的時(shí)候，不僅僅打印變量，而是要打印對(duì)象，用大括號(hào)({})將變量包圍起來。這樣的優(yōu)點(diǎn)是不僅會(huì)把變量的值打印，同時(shí)還會(huì)將變量名打印出來。

4. 使用console.table來打印多條目數(shù)據(jù)

如果你要打印的變量是一個(gè)數(shù)組，每一個(gè)元素都是一個(gè)對(duì)象。我建議你使用console.table來打印，其表格化的呈現(xiàn)更加美觀易讀。

5. 給log加點(diǎn)顏色

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

6. $ 和 $$

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

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

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

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

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

8. $_

$_記錄了最后一次在Console計(jì)算的表達(dá)式。

9. getEventListeners()

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

你也許注意到了，當(dāng)我在console里輸入表達(dá)式的時(shí)候，其結(jié)果立即被計(jì)算出來了。你可以看到我并沒有敲擊Enter鍵，而結(jié)果已經(jīng)顯示出來。這個(gè)是金絲雀版本的一個(gè)新功能，叫做"Eager Evaluation"。

10. debug(fn)

在上面的例子中，如果你想在點(diǎn)擊按鈕后的執(zhí)行過程中暫停，你可以使用debug函數(shù)。debug(fn)接收一個(gè)函數(shù)作為參數(shù)，當(dāng)每次該函數(shù)被調(diào)用時(shí)，Debugger就會(huì)在該函數(shù)的第一行中斷執(zhí)行。

想象一下你要debug一個(gè)按鈕的問題，但是你不知道這個(gè)按鈕對(duì)應(yīng)的事件函數(shù)在代碼中什么位置。除了去大量的源代碼中慢慢尋找之外，還有一個(gè)巧妙的方法。使用getEventListeners函數(shù)，然后將debug方法注入進(jìn)去。這樣，當(dāng)你點(diǎn)擊按鈕的時(shí)候，就會(huì)在該函數(shù)的第一行停下來。

11. copy(obj)

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

給copy函數(shù)傳入一個(gè)沒有格式的JSON，會(huì)返回格式化的結(jié)果：

12. Top-level await

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

Debugging in the Sources panel

在source面板，使用breakpoints，stepping-into, stepping-over等方式，你可以很好地掌控程序的執(zhí)行狀態(tài)，來發(fā)現(xiàn)代碼問題。接下里我不會(huì)介紹大家都知道的基礎(chǔ)內(nèi)容，而是一些我經(jīng)常使用的建議和技巧。

13. 開啟 auto-pretty print

在金絲雀版本的實(shí)驗(yàn)?zāi)Ｊ较?，你可以開啟自動(dòng)美化代碼模式。

14. 使用條件斷點(diǎn)在生產(chǎn)環(huán)境中注入console logs

斷點(diǎn)是一個(gè)很棒的功能。但還有一個(gè)更棒的：條件斷點(diǎn)。只有當(dāng)設(shè)定的條件滿足的時(shí)候，中斷才會(huì)執(zhí)行。也就是說DevTools并不會(huì)每次都中斷程序的執(zhí)行，而只是在你想要它中斷的時(shí)候才中斷。想了解更多：查看這里.

在生產(chǎn)環(huán)境下，因?yàn)椴荒苄薷脑创a，我喜歡使用條件斷點(diǎn)來注入console.log。如果我的斷點(diǎn)僅僅是一個(gè)console.log，DevTools不會(huì)中斷，因?yàn)閏onsole.log返回undefined,，是一個(gè)false的值。但是它會(huì)執(zhí)行我注入的表達(dá)式，可以看到輸出結(jié)果。

為什么不直接使用普通的斷點(diǎn)，并且查看變量呢？有時(shí)候我并不想這樣做。比如，當(dāng)我在分析那些頻繁執(zhí)行的操作，例如觸摸或則滑動(dòng)。我并不想每一次都導(dǎo)致Debugger觸發(fā)程序中斷，但是我想看到程序輸出的結(jié)果。

15. 暫停UI在Hover狀態(tài)下的展示結(jié)果

我們很難去檢查一個(gè)只有在Hover狀態(tài)下展示的元素。比如，如何去檢查一個(gè)tooltip？如果你右鍵并選擇檢查，元素已經(jīng)消失了。那么有辦法嗎？

我是這么操作的：

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

16. XHR breakpoints

如果想要理解一個(gè)請(qǐng)求是如何執(zhí)行的，可以使用sources面板的XHR breakpoints。

17. 使用DevTools作為IDE

DevTools的source面板可以說相當(dāng)強(qiáng)大。你可以快速查找，跳轉(zhuǎn)到某一行，某個(gè)函數(shù)，執(zhí)行一段代碼，使用多行光標(biāo)等等。這些功能在這篇medium文章中有詳細(xì)描述。

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

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

18. 使用network overrides來簡單調(diào)試生產(chǎn)代碼

如果你正在Debugging一個(gè)生產(chǎn)環(huán)境下面的bug，你可以使用network overrides來調(diào)試，而不用在本地搭建整個(gè)配置。

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

在生產(chǎn)環(huán)境下，也可以很容易Debugging，并且做一些性能上的測試也變得容易。

19. Nodejs debugging

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

node --inspect-brk script.js

跳轉(zhuǎn)到chrome://inspect頁面，在Remote Target選項(xiàng)，可以看到Node程序。

并且，在DevTools中你會(huì)看到一個(gè)綠色的Node圖標(biāo)，點(diǎn)擊圖標(biāo)會(huì)打開針對(duì)Node的Chrome Debugger。

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

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

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

ndb npx jest

如果你有一個(gè)自定義的腳本，你可以這樣調(diào)用：

ndb npm run unit

更妙的是，如果你在一個(gè)有配置package.json的項(xiàng)目下調(diào)用ndb，他甚至?xí)詣?dòng)分析package.json中的腳本，方便你直接使用DevTools。

20. 使用Snippets來輔助Debugging

DevTools提供了一個(gè)可以創(chuàng)建和保存小段代碼的工具，我很喜歡用它們來加速我的工作。比如lodashify?—?可以快速給任何應(yīng)用添加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);
})();

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

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代碼片段，你可以直接拿去使用。

關(guān)于Fundebug

Fundebug專注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java線上應(yīng)用實(shí)時(shí)BUG監(jiān)控。 自從2016年雙十一正式上線，F(xiàn)undebug累計(jì)處理了10億+錯(cuò)誤事件，付費(fèi)客戶有陽光保險(xiǎn)、荔枝FM、掌門1對(duì)1、微脈等眾多品牌企業(yè)。歡迎免費(fèi)試用！

版權(quán)聲明:
轉(zhuǎn)載時(shí)請(qǐng)注明作者Fundebug以及本文地址：https://blog.fundebug.com/2018/08/22/art-of-debugging-with-chrome-devtools/

您可能感興趣的

• 30個(gè)極大提高開發(fā)效率的VS Code插件
• 10個(gè)JavaScript難點(diǎn)
• 10個(gè)最佳ES6特性
• 重新思考單元測試
• 前端錯(cuò)誤收集（Vue.js、微信小程序）
• 不要爭了！技術(shù)選擇沒那么重要
• 用Fundebug插件記錄網(wǎng)絡(luò)請(qǐng)求異常
• 沒有Fundebug不能復(fù)現(xiàn)的BUG
• 黑科技！Fundebug支持網(wǎng)頁錄屏!
• 你還在等著用戶反饋BUG?
• Fundebug抓到了這個(gè)Bug
• Fundebug支持Source Map
• Fundebug上線2周年！陪你一起Debug！
• Fundebug三周年！生日快樂！