使用開發者工具是開發人員的日常，但多數人往往只使用其中的一小部分，很多功能其實都無人問津。在微軟 Edge 專案部擔任開發者工具首席產品經理的 Christian Heilmann 認為，開發者工具正變得越來越複雜和強勢，要解決這個問題則需要意識到，開發者工具不該指望使用者成為專家，而是要隨時間推移引導他們變成專家。

以下內容節選自他近日發表的博文，源自他自己在使用工具、記錄體驗並查閱使用者反饋時的真實經歷，不僅羅列了一些開發者工具使用技巧，也提出了優化思路。

需要注意的是，本文中提及的“Chromium 瀏覽器”是指一切使用 Chromium 核心、並提供全部開發者工具的瀏覽器，其中包括 Chrome、Microsoft Edge 以及 Brave 等等。

順帶一提，Microsoft Edge 雖然是 Windows 10/11 的內建瀏覽器，但是基於 Chromium 核心開發，所以從平臺型別的角度看類似於 Chrome。只是各款瀏覽器在使用者體驗與具體服務選項上有所區別。Edge Developer Tools 也與谷歌密切合作，產品內的不少工作成果也會被反哺到 Chromium 核心當中。最後，以下提到的部分實驗只在 Microsoft Edge 當中成立，感興趣的人可以選擇相應的 Edge Windows、Mac 及 Linux 版本進行驗證。好了，話不多說，馬上進入正題：

1. Console 不只是 “log()”

(一切附帶開發工具的瀏覽器均遵循此標準。）

毫無疑問，除了 Elements 工具之外，Console 可說是瀏覽器開發者工具中使用頻率最高的組成部分。人們習慣於在程式碼中新增“console.log()”進行除錯，瞭解到底發生了什麼。當然，實際還有更好的方法來除錯指令碼；但考慮到這種習慣已經相當普遍，所以我們就聊聊如何改善這種體驗。

第一個問題是，如果產品上線時日誌訊息沒有被刪除，那麼 Console 會發生堵塞。為了避免由此帶來的資訊查詢障礙，最好能充分使用 Console 提供的控制檯訊息篩選選項。正確使用這些選項既能保證良好的跟蹤能力，也可以遮蔽掉大量噪聲。

我們在記錄什麼？

可能很多朋友在使用“console.log()”時，都僅僅忙於記錄下具體值、卻忘記為其新增來源。例如，在使用以下程式碼時，我們會得到一份數字清單，但卻並不清楚這份清單的含義。

console.log(width)
console.log(height)

複製程式碼

解決這個問題的簡單方法，就是把要記錄的內容用大括號括起來。這樣 Console 就會同時記錄下值與名稱。

console.log({width})
console.log({height})

複製程式碼

豐富你的 Console 詞彙表

除了“console.log()”以外，大家還可以使用其他多種方法。例如用“console.warn()”記錄警告訊息，使用“console.info()”記錄資訊內容、使用“console.error()”記錄錯誤訊息。這不僅能改變 console 當中的顯示內容，還能為訊息建立起一種差異化記錄層級，大大降低記錄內容的過濾難度。

Console 中的錯誤與斷言

在 Console 中顯示錯誤確實要比直接彈出錯誤緩和得多，但我們最好能同時為產品維護或除錯人員提供問題的嚴重性提示。這裡介紹的有趣方法就是“console.assert()”，它只會在滿足特定條件時記錄一條訊息。對於這類需求，以往大家可能更習慣於編寫包含“console.log()”的“if”語句；但這裡推薦大家直接使用“assert()”，這樣更有利於後續清理除錯程式碼。

跟蹤事物來源

通常我們可能會新增“console.log(‘Called’)”或者類似的表達來測試某項功能是否被觸發。在得到肯定的答案後，接下來當然是找出呼叫該方法的根源。這時候就該“console.trace()”大顯身手了，它不僅能告訴我們哪些東西被呼叫過、還能告訴我們呼叫操作來自何處。

對 console 訊息進行分組

如果大家有很多訊息需要記錄，不妨使用“console.group(‘name’)”與“console.groupEnd(‘name’)”將訊息打包至 Console 中的可摺疊與可擴充套件訊息內，甚至可以設定預設情況下使用擴充套件或者是摺疊分組。

將 console 中的大量資訊顯示並過濾為表格形式

如果把大量資訊直接顯示為日誌，那閱讀起來絕對讓人血壓上升。好在“console.talbe()”方法能夠在 console 當中將這類陣列式資料顯示為表格形式，我們則提交想要檢視的屬性陣列對顯示內容進行過濾。

例如，我們可以使用“let elms = document.querySelectorAll(‘:is(h1,p,script’)”獲取文件中的所有 H1、段落與指令碼元素，並使用“console.table(elms)”將資訊結論顯示為表格。由於不同元素中包含大量屬性與特性，所以生成的表格仍然非常難以閱讀。這裡我們可以使用“console.table(elms,[‘nodeName’, ‘innerText’, ‘offsetHeight’])”進一步開展過濾，最終獲得一個只包含所需屬性及其值的表格。

在複製和貼上此資訊時，表格結構將保持不變。這也讓此功能成為將資料匯入 Excel 或者 Word 的絕佳工具。

靈活運用：$() and $()

Console 當中提供多種易於使用的便捷方法，被稱為 Console Utilitiers。其中兩個非常實用的代表就是“$()”與“$$()”，它們分別對應著“document.querySelector()”與“document.querySelectorAll()”。這些不僅能返回我們需要的 nodeList，還會將結果轉換為陣列，因此可以直接在結果上使用“map()”與“filter()”。以下程式碼就能獲取當前文件內的所有連結並返回一個數組，其中的物件僅包含各連結的“href”與“innerText”屬性作為“url”及“text”屬性。

$$('a').map(a => {<br>return{url: a.href, text: a.innerText}<br>})

2. 無需原始碼即可記錄——Live Expressions 與 Logpoints

(適用於 Chromium 瀏覽器)

“console.log()”的正確使用方式，當然是放置在程式碼中希望獲取資訊的位置。但我們也可以使用它深入瞭解自己無法訪問或變更的程式碼。Live Expressions就是一種無需變更程式碼即可記錄資訊的好辦法。它們能夠以驚人的速度記錄不斷變化的值，但又不會給 Console 帶來太大壓力、拖慢執行速度。

Logpoints 則是一種特殊的斷點。我們可以在開發者工具的 Sources tool 中右鍵點選 JavaScript 中的任意一行並設定 logpoint。系統會提示我們輸入想要記錄表示式，之後即可在該程式碼行執行時通過 console 獲取它的值。所以從技術上講，我們完全可以在 web 的任意位置上插入“console.log()”。

3. 在瀏覽器外也能記錄 – VS Code 偵錯程式

（適用於 Chromium 瀏覽器及 VS Code）

在 Visual Studio Code 中啟動除錯會話時，我們可以生成一個瀏覽器例項，並通過開瀏覽器開發者工具將 Debug Console 作為 Console 使用。

4. 將程式碼注入至任意站點——Snippets 與 Overrides

(適用於 Chromium 瀏覽器)

開發者工具中的Snippets是一種針對當前網站執行指令碼的方式。我們可以在這些指令碼中使用Console Utilities，進而編寫並存儲那些需要在 Console 中執行的高複雜度 DOM 操作指令碼。大家可以使用 snippets 編輯器或者命令選單，在當前文件的視窗上下文內執行指令碼。如果是使用命令選單的情況，請注意在命令開頭使用！並輸入要執行的程式碼段名稱。

Overrides的作用是為遠端指令碼儲存一份本地副本，並在頁面載入時執行覆蓋。例如，如果我們的整個應用程式構建過程太過緩慢，但又希望隨時嘗試一點新鮮設計，那麼 overrides 就能發揮作用了。另外，這款工具還能在無需瀏覽器擴充套件的前提下，替換掉第三方網站中那些煩人的指令碼。

5. 檢查與除錯工具的豐富程度遠超你的想象

(適用於 Chromium 瀏覽器)

大家對 Chromium 開發者工具的第一印象可能來自 Google Chrome、Brave 或者 Microsoft Edge 等瀏覽器，但這些工具的適用環境遠不止於此。一切基於 Electron 的應用程式都能啟用這些工具，供我們檢視引擎蓋之下的程式碼究竟是如何構建完成的。例如，我們可以在 GitHub Desktop 以及 Visual Studio Code 中使用，甚至可以利用開發者工具除錯瀏覽器中的開發者工具本身。

觀察開發者工具，可以看到它們是用 HTML、CSS 以及 TyperScript 編寫而成。這樣的技術使用環境令人興奮，因為我們能清楚地看到程式碼執行在怎樣的渲染引擎當中——這是在 Web 端永遠體會不到的快樂。

Visual Studio Code 中的 Edge 開發者工具

(適用於 Microsoft Edge 搭配 VS Code 擴充套件)

這些工具還具有可嵌入特性，因此能夠在瀏覽器之外加以使用。Microsoft Edge Tools for Visual Studio Code擴充套件就將這些工具引入了 Visual Studio Code。如此一來，我們可以直接在程式碼編輯器一旁使用視覺化除錯工具，徹底告別二者之間反覆切換的煩惱。在首次使用時，系統會提示使用者安裝擴充套件；之後每當我們除錯會話並單擊開發者工具圖示，這些工具就會應聲開啟。

6. 發掘更多寶藏功能……

在親自打理開發者工具一段時間之後，我從反饋資訊中總結出了幾點令人遺憾的事實。首先是，雖然我們都對開發者工具的驚人表現感到興奮，但使用者往往只使用其中的一小部分。很多東西好是好的，但卻總是靜靜躺在簡報和視訊教程當中沉睡，壓根無人問津。剛開始我們以為是因為說明文件不夠著實，於是花了大量時間更新DevTools文件，確保所有功能都擁有全面的描述與解釋。但事後來看情況並非如此，多數開發者只有實在沒有辦法（在谷歌、Stack Overflow 乃至其他社交渠道上都找不到答案）時，才會把說明文件視為最後的救命稻草。

開發者工具越來越複雜、越來越強勢——談談我的解決思路

(適用於 Microsoft Edge)

多年以來，持續增長下的瀏覽器開發者工具正變得越來越強勢、令人難以接近。這樣的結果令人沮喪，我覺得我們應該做得更好。所以在我看來，開發者工具應該實現這樣一個目標：

開發者工具不該指望使用者成為專家，而是隨時間推移引導他們變成專家。

我們正在嘗試一系列簡化操作的想法，相應的結果很快就會在 Microsoft Edge 中得到體現。其中一項探索就是“Focus Mode”，在這裡介面不再顯示所有工具和選項卡，而是將工具分類至不同的用例當中，例如“Elements/CSS 除錯”、“原始碼/JavaScript 除錯”或者“網路檢查”等。其核心思路非常簡單，就是隱藏掉一切可能令人困惑或妨礙效率的工具，只顯示與當前工作相關的工具。

我們正在研究的另一項功能是“informational overlays”。我們打算提供一個幫助按鈕，用於開啟開發者工具的覆蓋框，具體解釋每款工具是什麼、如何使用並列出說明文件連結。我們希望這一設計能夠幫大家更輕鬆地瞭解各項功能。

程式碼編寫與結果除錯之間仍然相互脫節

（適用於 Microsoft Edge)

雖然如今的開發者工具已經相當完善，但創作與除錯之間仍然存在一定程度的脫節。大多數情況下，我們只能編寫程式碼、建立應用程式，之後轉向瀏覽器檢視哪些部分起不到應有的作用。接下來，使用者會使用瀏覽器開發者工具調整並修復這些問題。但最大的麻煩這就來了：我們要怎麼把由瀏覽器開發者工具建立的變更返回至程式碼？大多數情況下，答案只有一個：複製加貼上，或者記下實際修改內容。

我們目前正在研究兩種方法，希望降低整個除錯與修改流程。一種就是儘量使用 Visual Studio Code 替代開發者工具中的編輯器，並在使用者使用開發者工具時直接更改磁碟驅動器上的檔案。另一種則是藉助 VS Code 擴充套件來實現，允許大家在使用開發者工具時直接修改編輯器內的原始碼，並在完成後明確指示是否要替換掉磁碟上的真實原始檔。

最後，Christian Heilmann 呼籲開發者積極反饋意見，“我們努力在讓反饋與響應變得更加便捷。例如，Visual Studio Code 擴充套件就提供了醒目的連結與按鈕，可供隨時上報問題和申請功能。”

萬方