Logpoints 和自動附加功能介紹

2018 年 7 月 12 日，Kenneth Auchenberg，@auchenberg

在過去的幾個月裡，我們一直在努力改進 Visual Studio Code 中的除錯體驗。在這篇文章中，我將討論我們如何思考除錯問題、我們從使用者那裡聽到的反饋，並解釋我們正在採取的步驟，以使 VS Code 中的除錯變得更簡單、更容易。

自 VS Code 誕生以來，我們就提供了整合除錯體驗，因為我們相信除錯應該是您編寫和編輯原始碼的地方——您的編輯器——不可或缺的一部分。

VS Code 除錯體驗由通用的偵錯程式 UI 提供支援，該 UI 透過除錯介面卡協議 (DAP) 與我們稱為除錯介面卡 (DA) 的特定型別 VS Code 擴充套件進行通訊。DA 與實際的偵錯程式進行通訊，並在 DAP 和偵錯程式的特定執行時除錯協議或 API 之間進行轉換。

這意味著 VS Code 的核心與特定的偵錯程式完全解耦，這種架構允許 VS Code 除錯任何內容，只要有可用的除錯介面卡，如下圖所示：

觀察和痛點

如今，有大量滿意的開發人員定期使用 VS Code 進行除錯，但作為我們使命的一部分，我們希望讓除錯變得更容易，並惠及更多開發人員。

為此，我們開始對話，以更好地瞭解 VS Code 中除錯的痛點，並瞭解為什麼有些開發人員根本不使用我們的偵錯程式。

以下是我們的觀察結果：

除錯配置很難正確設定

VS Code 是一個帶有通用偵錯程式的通用編輯器，不專門用於特定的堆疊或執行時。因此，我們無法提供一個適用於所有人的有主見的預設除錯配置。

這意味著 VS Code 需要您為偵錯程式配置設定，並指定如何使用正確的引數等來啟動執行時。

我們承認這可能很難正確設定，但我們看不到完全消除所有人的除錯配置的方法。但是，我們確實相信除錯配置可以簡化，並且根據上下文，可以最小化。

我稍後會回到這個問題。

啟動和附加配置之間的混淆

在 VS Code 中，我們有兩個核心除錯概念：**啟動**和**附加**，它們處理兩種不同的工作流和開發人員群體。根據您的工作流，知道哪種型別的配置適合您的專案可能會令人困惑。

如果您來自瀏覽器 DevTools 背景，您不習慣“從您的工具啟動”的概念，因為您的瀏覽器例項已經開啟。當您開啟 DevTools 時，您只是將 DevTools **附加**到您開啟的瀏覽器選項卡。另一方面，如果您來自 Java 背景，讓您的編輯器為您**啟動** Java 程序，並且您的編輯器自動將其偵錯程式附加到新啟動的程序，這是很正常的。

解釋**啟動**和**附加**之間差異的最佳方法是，將啟動配置視為在 VS Code 附加到應用程式**之前**如何在除錯模式下啟動應用程式的配方，而附加配置則是如何將 VS Code 的偵錯程式連線到**已經**執行的應用程式或程序的配方。

啟動配置的價值在於它們為您提供了一種透過建立可重複且可與您的專案和團隊共享的配置，來減輕以正確除錯引數啟動應用程式的認知開銷的方法。

然而，當我們與開發人員討論他們如何啟動應用程式時，我們發現了一個模式並做出了一個重要觀察：

**觀察**：許多使用 VS Code 的開發人員非常喜歡整合終端，並依賴命令列工具來啟動他們的應用程式。對於許多人來說，在終端中執行命令，然後從編輯器附加偵錯程式是一種更自然的工作流。這類似於在瀏覽器啟動後開啟 DevTools。

這個觀察結果是關鍵，我們意識到許多使用者不希望在他們的編輯器中獲得完整的“神奇”啟動體驗。他們希望將編輯器作為編輯和除錯原始碼的地方，並使用終端啟動應用程式、執行構建指令碼等。這就是我們在 VS Code 中提供整合終端體驗的原因之一，因為我們相信一個良好的功能 UI 應該與終端共存並良好整合。

許多開發人員不使用斷點，因為他們正在檢查狀態變化

在檢視開發人員如何除錯應用程式時，我們還看到了另一個有趣的模式：使用日誌而不是斷點。

用於除錯的日誌記錄不是一個新概念，但這個觀察結果很重要：

**觀察**：傳統的除錯工作流主要側重於減慢執行以檢查程式邏輯，而日誌記錄工作流通常涉及檢查程式狀態以及它在應用程式正常執行期間如何變化。這裡的基本觀察是，這兩種技術用於不同的除錯目的。

這個觀察結果對於 JavaScript 開發人員尤其相關，他們主要處理管理狀態的複雜性，這或許可以解釋為什麼大多數 JavaScript 開發人員仍然喜歡在原始碼中新增 console.log 而不是使用指令碼偵錯程式。

自動附加到 Node 程序

在思考一些開發人員如何使用整合終端啟動除錯會話時，我們看到了一個獨特的機會。透過利用我們在 VS Code 中從您的編輯器和整合終端獲得的上下文資訊，我們可以檢測您的上下文並推斷您的除錯意圖，這可以為 Node.js 開發人員提供更簡單的除錯體驗。

因此，在 我們三月份的 VS Code 迭代中，我們釋出了一個名為 **Node 自動附加**的新功能，它使 Node 偵錯程式能夠自動附加到從 VS Code 整合終端以除錯模式啟動的 Node.js 程序。

您可以透過從命令面板執行 **除錯: 切換自動附加** 命令來啟用自動附加，啟用後，您也可以從狀態列切換自動附加。

此功能完全消除了任何除錯配置，因為我們將任何以 `node --inspect` 啟動的 Node.js 程序解釋為除錯意圖。當與整合終端結合使用時，它是一種更簡單的除錯體驗，允許開發人員以自己的方式啟動應用程式，同時消除除錯配置！🎉

NPM 指令碼和除錯

許多 Node.js 開發人員依賴 npm 指令碼來啟動應用程式或開始除錯會話，我們在這方面也有一些好訊息：自動附加也適用於 npm 指令碼。如果您執行 `npm run debug` 並且 `"debug"` 指令碼是 `"node --inspect"` 或任何其他包含 `--inspect` 的命令，那麼自動附加將檢測到並附加偵錯程式 🎉

我們還認識到一些開發人員希望以更視覺化的方式查詢和執行他們的 npm 指令碼，因此在 我們 2018 年 4 月的迭代中，我們添加了一個新的 NPM 指令碼資源管理器，允許您直接從 UI 瀏覽和執行您的 NPM 指令碼。作為我們簡化除錯配置工作的一部分，我們還使其可以直接從資源管理器開始 Node.js 除錯，而無需建立除錯配置。

如果您有一個包含除錯引數（如 `--inspect`）的 npm 指令碼，我們將自動檢測到這一點並提供一個啟動偵錯程式的除錯操作，如下圖所示：

Logpoints 介紹

基於日誌記錄是一種重要的除錯技術的認識，我們看到了一個機會，可以將狀態檢查新增到我們現有的除錯體驗中。在 三月份的 VS Code 迭代中，我們釋出了我們稱之為 Logpoints 的除錯功能的第一個實現。

Logpoint 是一種斷點變體，它不會“中斷”到偵錯程式中，而是將訊息記錄到控制檯。

Logpoints 的概念並不新鮮，在過去的幾年裡，我們看到這個概念的不同變體出現在各種工具中，如 Visual Studio、Edge DevTools 和 GDB，名稱各異，例如 Tracepoints 和 Logpoints。

為什麼以及何時使用 Logpoints？

Logpoints 基於這樣一個觀察，即在許多情況下，您不想停止應用程式特定部分的執行，而是想檢查狀態在應用程式生命週期中如何變化。

Logpoints 允許您將按需日誌記錄語句“注入”到您的應用程式邏輯中，就像您在啟動應用程式之前已經添加了日誌記錄語句一樣。Logpoints 在執行時注入，不保留在原始碼中，因此您不必提前計劃，可以根據需要注入 Logpoints。另一個好處是，您不必擔心在除錯完成後清理原始碼。

對於 JavaScript 開發人員來說，這意味著您再也不用擔心留下 `console.log` 了——只需使用 Logpoints！更好的是，您可以結合使用 `console.log` 和 Logpoints。如果您在已經有 `console.log` 的程式碼塊中插入 Logpoint，您會在除錯控制檯中看到兩種型別的日誌記錄語句。

雲環境中的 Logpoints

Logpoints 在雲環境（或任何遠端環境）中特別有用，因為它們使您無需重新部署應用程式即可將日誌記錄注入遠端環境。同樣重要的是，您不會使用 Logpoints 停止指令碼執行，因此您的使用者不會受到影響，這與在常規斷點處停止正在執行的應用程式不同。

您可以在此處閱讀更多關於如何在 Azure 上為 Node.js 使用 Logpoints 的資訊。

支援的語言

自 VS Code 中首次釋出 Logpoints 以來，我們看到 VS Code 除錯介面卡越來越多地採用它，如今以下語言都支援 Logpoint：

• Node.js 偵錯程式
• Chrome 偵錯程式
• Firefox 偵錯程式
• Microsoft Edge 偵錯程式
• React Native 偵錯程式
• Python 偵錯程式
• Dart 偵錯程式
• Lua 偵錯程式
• Java 偵錯程式
• 大型機偵錯程式

VS Code 中的 Logpoints

如果您有興趣在您的 VS Code 除錯介面卡中新增 Logpoint 支援，請檢視協議中的這些更改。您也可以檢視上述除錯介面卡，瞭解每個執行時如何選擇實現 Logpoints。

後續步驟

目前就這些，但我們還沒有完成。在我們的七月迭代中，我們正在改進自動附加功能，以幫助提高可發現性（#53640），這是基於使用者反饋進行的。

我們希望自動附加、NPM 指令碼資源管理器和 Logpoints 的引入能夠讓使用 VS Code 進行除錯變得更容易。一如既往，我們渴望聽到您的反饋，請透過 GitHub 或 Twitter 上的 @code 與我們聯絡。

代表 VS Code 團隊：祝您編碼愉快！

/Kenneth Auchenberg——Twitter 上的 @auchenberg