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

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

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

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

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

簡(jiǎn)潔起見(jiàn)陪白，接下來(lái)我會(huì)使用開(kāi)發(fā)者工具來(lái)指代谷歌開(kāi)發(fā)者工具颈走。

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

使用金絲雀版

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

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

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

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

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

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

Console

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

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

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

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

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

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

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

6. $ 和 $$

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

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

你可以使用$$檢查頁(yè)面中的無(wú)效鏈接：

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指向之前選中的元素帘饶。以此類(lèi)推哑诊，直到$4都可以使用。

8. $_

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

9. getEventListeners()

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

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

10. debug(fn)

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

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

11. copy(obj)

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

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

12. Top-level await

async/await 使得異步操作變得更加容易和可讀。唯一的問(wèn)題在于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)锐墙，來(lái)發(fā)現(xiàn)代碼問(wèn)題。接下里我不會(huì)介紹大家都知道的基礎(chǔ)內(nèi)容长酗，而是一些我經(jīng)常使用的建議和技巧溪北。

13. 開(kāi)啟 auto-pretty print

在金絲雀版本的實(shí)驗(yàn)?zāi)Ｊ较拢憧梢蚤_(kāi)啟自動(dòng)美化代碼模式花枫。

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

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

在生產(chǎn)環(huán)境下乙墙，因?yàn)椴荒苄薷脑创a，我喜歡使用條件斷點(diǎn)來(lái)注入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. 打開(kāi)sources面板
2. 顯示tooltip
3. 使用快捷鍵來(lái)暫停腳本執(zhí)行(將鼠標(biāo)停留在暫停的圖標(biāo)上查看快捷鍵)
4. 回到Elements面板鸣剪，然后像通常一樣去檢查元素

16. XHR breakpoints

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

17. 使用DevTools作為IDE

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

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

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

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

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

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

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

19. Nodejs debugging

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

node --inspect-brk script.js

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

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

如果你想要用DevTools Debugger來(lái)debug你的單元測(cè)試匙头，你需要這樣調(diào)用：

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

不過(guò)這樣做其實(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來(lái)輔助Debugging

DevTools提供了一個(gè)可以創(chuàng)建和保存小段代碼的工具，我很喜歡用它們來(lái)加速我的工作借帘。比如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ù)式用來(lái)增強(qiáng)對(duì)象的屬性，每次被訪問(wèn)或則修改肺然，它都會(huì)提供給我充分的信息蔫缸，比如誰(shuí)訪問(wèn)了，誰(shuí)更改了它际起。在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專(zhuān)注于JavaScript、微信小程序它匕、微信小游戲展融、支付寶小程序、React Native豫柬、Node.js和Java線上應(yīng)用實(shí)時(shí)BUG監(jiān)控告希。 自從2016年雙十一正式上線，F(xiàn)undebug累計(jì)處理了10億+錯(cuò)誤事件烧给，付費(fèi)客戶有陽(yáng)光保險(xiǎn)燕偶、荔枝FM、掌門(mén)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è)極大提高開(kāi)發(fā)效率的VS Code插件
• 10個(gè)JavaScript難點(diǎn)
• 10個(gè)最佳ES6特性
• 重新思考單元測(cè)試
• 前端錯(cuò)誤收集（Vue.js榴鼎、微信小程序）
• 不要爭(zhēng)了伯诬！技術(shù)選擇沒(méi)那么重要
• 用Fundebug插件記錄網(wǎng)絡(luò)請(qǐng)求異常
• 沒(méi)有Fundebug不能復(fù)現(xiàn)的BUG
• 黑科技！Fundebug支持網(wǎng)頁(yè)錄屏!
• 你還在等著用戶反饋BUG?
• Fundebug抓到了這個(gè)Bug
• Fundebug支持Source Map
• Fundebug上線2周年巫财！陪你一起Debug盗似！
• Fundebug三周年！生日快樂(lè)平项！