微軟產(chǎn)品經(jīng)理：你不能不知道的6個Web開發(fā)者工具

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

以下內(nèi)容節(jié)選自他近日發(fā)表的博文，源自他自己在使用工具、記錄體驗并查閱用戶反饋時的真實經(jīng)歷，不僅羅列了一些開發(fā)者工具使用技巧，也提出了優(yōu)化思路。

需要注意的是，本文中提及的“Chromium 瀏覽器”是指一切使用 Chromium 內(nèi)核、并提供全部開發(fā)者工具的瀏覽器，其中包括 Chrome、Microsoft Edge 以及 Brave 等等。

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

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

毫無疑問，除了 Elements 工具之外，Console 可說是瀏覽器開發(fā)者工具中使用頻率最高的組成部分。人們習慣于在代碼中添加“console.log()”進行調(diào)試，了解到底發(fā)生了什么。當然，實際還有更好的方法來調(diào)試腳本；但考慮到這種習慣已經(jīng)相當普遍，所以我們就聊聊如何改善這種體驗。

第一個問題是，如果產(chǎn)品上線時日志消息沒有被刪除，那么 Console 會發(fā)生堵塞。為了避免由此帶來的信息查找障礙，最好能充分使用 Console 提供的控制臺消息篩選選項。正確使用這些選項既能保證良好的跟蹤能力，也可以屏蔽掉大量噪聲。

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

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

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

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

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

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

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

如果大家有很多消息需要記錄，不妨使用“console.group(‘name’)”與“console.groupEnd(‘name’)”將消息打包至 Console 中的可折疊與可擴展消息內(nèi)，甚至可以設(shè)置默認情況下使用擴展或者是折疊分組。

如果把大量信息直接顯示為日志，那閱讀起來絕對讓人血壓上升。好在“console.table()”方法能夠在 console 當中將這類數(shù)組式數(shù)據(jù)顯示為表格形式，我們則提交想要查看的屬性數(shù)組對顯示內(nèi)容進行過濾。

例如，我們可以使用“l(fā)et elms = document.querySelectorAll(‘:is(h1,p,script’)”獲取文檔中的所有 H1、段落與腳本元素，并使用“console.table(elms)”將信息結(jié)論顯示為表格。由于不同元素中包含大量屬性與特性，所以生成的表格仍然非常難以閱讀。這里我們可以使用“console.table(elms,[‘nodeName’, ‘innerText’, ‘offsetHeight’])”進一步開展過濾，最終獲得一個只包含所需屬性及其值的表格。

在復(fù)制和粘貼此信息時，表格結(jié)構(gòu)將保持不變。這也讓此功能成為將數(shù)據(jù)導(dǎo)入 Excel 或者 Word 的絕佳工具。

Console 當中提供多種易于使用的便捷方法，被稱為 Console Utilitiers。其中兩個非常實用的代表就是“$()”與“$$()”，它們分別對應(yīng)著“document.querySelector()”與“document.querySelectorAll()”。這些不僅能返回我們需要的 nodeList，還會將結(jié)果轉(zhuǎn)換為數(shù)組，因此可以直接在結(jié)果上使用“map()”與“filter()”。以下代碼就能獲取當前文檔內(nèi)的所有鏈接并返回一個數(shù)組，其中的對象僅包含各鏈接的“href”與“innerText”屬性作為“url”及“text”屬性。

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

(適用于 Chromium 瀏覽器)

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

Logpoints 則是一種特殊的斷點。我們可以在開發(fā)者工具的 Sources tool 中右鍵點擊 JavaScript 中的任意一行并設(shè)置 logpoint。系統(tǒng)會提示我們輸入想要記錄表達式，之后即可在該代碼行運行時通過 console 獲取它的值。所以從技術(shù)上講，我們完全可以在 web 的任意位置上插入“console.log()”。

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

在 Visual Studio Code 中啟動調(diào)試會話時，我們可以生成一個瀏覽器實例，并通過開瀏覽器開發(fā)者工具將 Debug Console 作為 Console 使用。

(適用于 Chromium 瀏覽器)

開發(fā)者工具中的 Snippets 是一種針對當前網(wǎng)站運行腳本的方式。我們可以在這些腳本中使用 Console Utilities，進而編寫并存儲那些需要在 Console 中執(zhí)行的高復(fù)雜度 DOM 操作腳本。大家可以使用 snippets 編輯器或者命令菜單，在當前文檔的窗口上下文內(nèi)運行腳本。如果是使用命令菜單的情況，請注意在命令開頭使用！并輸入要運行的代碼段名稱。

Overrides 的作用是為遠程腳本存儲一份本地副本，并在頁面加載時執(zhí)行覆蓋。例如，如果我們的整個應(yīng)用程序構(gòu)建過程太過緩慢，但又希望隨時嘗試一點新鮮設(shè)計，那么 overrides 就能發(fā)揮作用了。另外，這款工具還能在無需瀏覽器擴展的前提下，替換掉第三方網(wǎng)站中那些煩人的腳本。

(適用于 Chromium 瀏覽器)

大家對 Chromium 開發(fā)者工具的第一印象可能來自 Google Chrome、Brave 或者 Microsoft Edge 等瀏覽器，但這些工具的適用環(huán)境遠不止于此。一切基于 Electron 的應(yīng)用程序都能啟用這些工具，供我們查看引擎蓋之下的代碼究竟是如何構(gòu)建完成的。例如，我們可以在 GitHub Desktop 以及 Visual Studio Code 中使用，甚至可以利用開發(fā)者工具調(diào)試瀏覽器中的開發(fā)者工具本身。

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

(適用于 Microsoft Edge 搭配 VS Code 擴展)

這些工具還具有可嵌入特性，因此能夠在瀏覽器之外加以使用 。Microsoft Edge Tools for Visual Studio Code 擴展就將這些工具引入了 Visual Studio Code。如此一來，我們可以直接在代碼編輯器一旁使用可視化調(diào)試工具，徹底告別二者之間反復(fù)切換的煩惱。在首次使用時，系統(tǒng)會提示用戶安裝擴展；之后每當我們調(diào)試會話并單擊開發(fā)者工具圖標，這些工具就會應(yīng)聲開啟。

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

(適用于 Microsoft Edge)

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

開發(fā)者工具不該指望用戶成為專家，而是隨時間推移引導(dǎo)他們變成專家。

我們正在嘗試一系列簡化操作的想法，相應(yīng)的結(jié)果很快就會在 Microsoft Edge 中得到體現(xiàn)。其中一項探索就是“Focus Mode”，在這里界面不再顯示所有工具和選項卡，而是將工具分類至不同的用例當中，例如“Elements/CSS 調(diào)試”、“源代碼 /JavaScript 調(diào)試”或者“網(wǎng)絡(luò)檢查”等。其核心思路非常簡單，就是隱藏掉一切可能令人困惑或妨礙效率的工具，只顯示與當前工作相關(guān)的工具。

我們正在研究的另一項功能是“informational overlays”。我們打算提供一個幫助按鈕，用于開啟開發(fā)者工具的覆蓋框，具體解釋每款工具是什么、如何使用并列出說明文檔鏈接。我們希望這一設(shè)計能夠幫大家更輕松地了解各項功能。

（適用于 Microsoft Edge)

雖然如今的開發(fā)者工具已經(jīng)相當完善，但創(chuàng)作與調(diào)試之間仍然存在一定程度的脫節(jié)。大多數(shù)情況下，我們只能編寫代碼、創(chuàng)建應(yīng)用程序，之后轉(zhuǎn)向瀏覽器查看哪些部分起不到應(yīng)有的作用。接下來，用戶會使用瀏覽器開發(fā)者工具調(diào)整并修復(fù)這些問題。但最大的麻煩這就來了：我們要怎么把由瀏覽器開發(fā)者工具創(chuàng)建的變更返回至代碼？大多數(shù)情況下，答案只有一個：復(fù)制加粘貼，或者記下實際修改內(nèi)容。

我們目前正在研究兩種方法，希望降低整個調(diào)試與修改流程。一種就是盡量使用 Visual Studio Code 替代開發(fā)者工具中的編輯器，并在用戶使用開發(fā)者工具時直接更改磁盤驅(qū)動器上的文件。另一種則是借助 VS Code 擴展來實現(xiàn)，允許大家在使用開發(fā)者工具時直接修改編輯器內(nèi)的源代碼，并在完成后明確指示是否要替換掉磁盤上的真實源文件。

最后，Christian Heilmann 呼吁開發(fā)者積極反饋意見，“我們努力在讓反饋與響應(yīng)變得更加便捷。例如，Visual Studio Code 擴展就提供了醒目的鏈接與按鈕，可供隨時上報問題和申請功能。”