使用開發者工具是開發人員的日常，但多數人往往只使用其中的一小部分，很多功能其實都無人問津。在微軟 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 => { return {url: a.href, text: a.innerText}})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 擴展就提供了醒目的鏈接與按鈕，可供隨時上報問題和申請功能。”