在 VS Code 中引入 Chrome 除錯

Name: Visual Studio Code
Author: Microsoft

2016 年 2 月 23 日，作者：Andy Sterland 和 Kenneth Auchenberg

自 Visual Studio Code 首次釋出以來，我們的重點之一就是透過讓開發人員直接在編輯器中除錯程式碼來簡化日常工作流程。我們從 .NET 和 Node.js 除錯開始，今天我們邁出了下一步，在 Visual Studio Code 中引入了 Chrome 偵錯程式。

我們的 Chrome 偵錯程式允許前端開發人員直接從 Visual Studio Code 除錯在 Google Chrome 中執行的客戶端 JavaScript 程式碼。

Demo

它是如何工作的？

我們的偵錯程式透過其Chrome 偵錯程式協議連線到 Chrome，我們將瀏覽器中載入的檔案對映到 Visual Studio Code 中開啟的檔案。這意味著開發人員現在可以直接在原始碼中設定斷點、設定要監視的變數並在除錯時檢視完整的呼叫堆疊——所有這些都無需離開編輯器。

在上面的示例中，我們展示了一個透過 Browserify 打包和最小化的 AngularJS 應用程式，它正在從 VS Code 進行除錯。之所以可行，是因為我們的偵錯程式理解 JavaScript Source Maps（JavaScript 源對映），我們將利用它來使開發人員可以直接從原始原始碼進行除錯，而不是瀏覽器看到的轉譯結果。支援源對映還可以在 VS Code 中直接除錯 TypeScript。

目前，Chrome 需要啟用遠端除錯才能啟動，並且只支援一個併發連線。這意味著如果您在 Chrome 中開啟 DevTools，與 VS Code 的連線將被 Chrome 終止。這有點煩人，我們希望這個問題能儘快得到修復。

開始使用

要開始使用，請開啟擴充套件檢視（⇧⌘X (Windows、Linux Ctrl+Shift+X)）。當擴充套件列表出現時，鍵入“chrome”來過濾列表並安裝 Debugger for Chrome 擴充套件。然後您將建立一個啟動配置，我們會在此處的 README 中詳細解釋。

您可以設定 VS Code 來連線到一個已經在執行的 Chrome 例項，或者簡單地啟動一個啟用遠端除錯的新例項，但請在我們的 README 中閱讀更多內容。

支援的功能

在第一個版本中，我們支援以下功能：

設定斷點，包括在啟用源對映時在原始檔內部設定斷點
TypeScript，透過源對映
單步執行，包括使用 Chrome 頁面上的按鈕
透過 VS Code 區域性變數窗格檢視區域性變數
除錯 eval 指令碼、指令碼標籤和動態新增的指令碼
透過 VS Code 監視面板進行監視。
除錯控制檯
大多數控制檯 API

未來展望

我們相信前端開發人員還有很多工作要做，因為近年來 Web 構建變得異常複雜。透過我們的 Chrome 偵錯程式，我們正在朝著更簡單的 Web 開發工作流程邁出第一步，在這個流程中，來自不同供應商的瀏覽器和工具能夠協同工作，Web 構建感覺更加整合。

我們已將此擴充套件作為 MIT 許可的開源專案釋出在 GitHub 上。它仍在開發中，因此請檢視我們的問題頁面瞭解已知錯誤——例如，我們在支援所有型別的生成的源對映方面存在一些問題。

目前我們支援 Google Chrome，但我們也在考慮將支援擴充套件到 Microsoft Edge 和其他瀏覽器。我們非常需要您的反饋和幫助來構建更好的除錯體驗。

如果您有任何問題或改進建議，請隨時透過 Twitter 或 GitHub 與我們聯絡。

–

Andy Sterland，高階專案經理，JavaScript 診斷
Kenneth Auchenberg，專案經理，JavaScript 診斷