用於 VS Code 的 Edge 開發工具擴展太棒了，因此我放棄了 Chrome

我已經使用 Visual Studio Code 好幾年了，一直用得很是愉快，但是 Microsoft Edge Tools的VS Code擴展 將 Web 開發工具帶到了另一個層次。這個擴展足以令人做出了改變，我讓 Edge 取代 Chrome 成了日常用於網頁開發工作的瀏覽器。VS Code 的早期版本並沒有對運行和調試應用程序提供任何開箱即用的支持；它是一個可擴展的代碼編輯器，而不是集成開發環境。微軟和社區開發的擴展添加了用户所需的功能和各種語言/框架支持。多年來，我一直將針對 Chrome的VS Code Debugger 擴展(現在已經棄用了)與 Angular 和 React 一起使用來做開發，雖然它用起來也還行，但也有一些問題使它算不得真正優秀的用户體驗。經過多年的發展，VS Code 包含了越來越多對 JavaScript 和瀏覽器調試的內置支持，這改善了體驗，並進一步推動了 Web 開發者採用這一多功能編輯器。

不久前，我發現了針對 Visual Studio Code 的 Microsoft Edge Tools。這個擴展更緊密地集成了 Microsoft 的 Edge 瀏覽器和 VS Code，提供了它們兩個之間更加無縫的開發和調試體驗，並進一步模糊了功能強大的代碼編輯器和 IDE 之間的界限。如果你習慣了 Chrome 的開發工具，Edge 的工具幾乎是一樣的。Edge 甚至還有一些額外的功能，如流行的淺色和深色主題，包括 Solarized、Monokai 等。雖然我在安裝這個擴展之前已經是 Edge 的一個用户，但大多數 Chrome 用户會發現 Edge 用起來很熟悉很直觀，不會對他們的正常工作流程產生干擾。因為基於 Chrome 的瀏覽器都使用 Blink 瀏覽器引擎，所以你可以確信 JavaScript 的支持是相同的，頁面內容在 Edge 中的呈現與在 Chrome 中的呈現是相同的。如果你還沒有安裝 Edge 和 VS Code，可以訪問他們的主頁獲取你的操作系統對應的最新版本：

• microsoft.com/en-us/edge

• code.visualstudio.com/download

注意：如果你使用的是 Linux，請安裝 microsoft 針對 Edge 和 VS Code 提供的.deb 包、.rpm 包或 tar.gz，而不是 Flatpak 或 Snap 版本。 對於開發人員來説，這些往往更難處理，因為權限問題讓獲取擴展、附加調試器和訪問文件都很頭疼。

下面介紹我如何在我的機器上針對一般的 Web 開發配置 VS Code 和 Edge 工具擴展。我用 Pop!_OS 22.04，但這也適用於 Ubuntu 和其他基於 Debian 的發行版。我也在 Windows 上使用了類似的配置，但我沒有在 macOS 上測試過。打開 VS Code，在 Extensions 下搜索“Microsoft Edge Tools for VS Code”並安裝它：

這個擴展最酷的功能之一是能夠在 VS Code 中完全調試靜態內容，零配置，沒有其他依賴。

為了驗證這一點，我使用 Vue.js 製作了一個小應用程序，並通過右鍵單擊根文件“index.html”並選擇“Open with Edge”來啟動 Edge 工具擴展的調試會話。我可以設置斷點，單步調試代碼，查看網絡流量，inspect 數據和頁面元素，修改 CSS 等等等等，所有這些在 VS Code 中都有！

這是一個很好的特性——一個好的使用場景可能是從 StackBlitz、CodePen 等裏面取出一些可運行的示例代碼，並在本地機器上運行/調試它，在集成到一個更大的項目之前對它的代碼片段進行試驗。然而，大多數開發人員都想要一個更加可配置的設置，因為這種快速調試配置非常有限。我在使用一個特定的項目時立即遇到了一個問題，在本地運行應用程序時我無法配置一個第三方認證服務(我把 這個問題發佈到了StackOverflow上 ，有興趣的話可以看一下)。Edge Tools 擴展使用了一個帶有“ file:// ”模式的 url，而認證服務配置不允許將這樣的 url 設置為回調。我需要有一個有模有樣運行着的本地主機 Web 服務器，以便我的應用程序會有一個像“ http://localhost:port ”的 url，這才是被允許的認證服務。為了做到這一點，我安裝了 VS Code的Live Server擴展 。這是一個輕量級的、易於使用的本地開發 Web 服務器，也可以在 VS Code 的 Extensions 中找到它並進行安裝：

然而，Live Server 擴展並不是 Edge Tools 所必需的。如果你正在使用 Angular、React、Vue.js 等框架，你可能正在使用 Node.js 和/或各種 CLI 工具作為你的開發棧的一部分來構建和服務應用程序。VS Code 內置的 Node.js 支持和 Edge tools 擴展能很好地集成以這種方式配置的項目，下面的例子仍然適用於不使用 Live Server 的項目。

為了進一步配置調試設置，建議在 VS Code 的 “launch.json”文件 中添加一些調試配置。這允許對任意數量的所需配置進行簡單的一鍵調試，並且在與團隊成員共享運行和調試配置時特別有用。如果“launch.json”文件不存在，Edge 工具擴展通過自動添加它們，創建一個“launch.json”文件，使這變得很容易。點擊左邊面板上“Extension”的圖標，然後點擊“Generate launch.json”按鈕：

如果你的項目中已經有了“launch.json”文件，點擊“Configure launch.json”按鈕將額外的配置添加到此文件。

這將更新“launch.json”文件並將幾個選項添加到”Run and Debug”菜單。

“launch.json”還不十分完整——必須指定項目的 url。我還設置了一個附加的 Edge 運行時參數，並設置了一些項目文件夾，這些文件夾在調試過程中應該使用“skipFiles”屬性忽略：

在 VS Code 中打開瀏覽器窗口、瀏覽器開發工具和代碼編輯器是一個很酷的功能，但我需要更大的屏幕空間來運行和調試應用。幸運的是，Edge tools 擴展也可以用於獨立運行的 Edge 瀏覽器實例。我發現這讓我擁有了使用瀏覽器及其內置開發工具和代碼編輯環境的“傳統”網頁開發的所有優勢，但由於 Edge 和 VS Code 之間的緊密集成，體驗還得到了增強。如果希望如此，請打開 Edge Tools 擴展設置，並確保選中“ Headless ”模式:

通過右鍵單擊根目錄“index.html”>Open with Live Server，或者點擊 VS Code 的狀態欄中的“Go Live”來啟動 Live 服務器。如果你正在使用另一個工具或框架來構建和服務你的應用，請像往常一樣啟動它(例如：ng serve)。

選擇 debug 菜單中的 “Launch Edge and attach DevTools” 調試配置，啟動它：

將會在啟動一個附加 VS Code 調試器的 Edge 實例，並且仍然可以使用所有的調試功能。

沒有必要在 VS Code 中打開 Edge Dev Tools 選項卡——關閉它不會影響當前的調試會話。它可以通過調試工具欄菜單>“Open Browser Devtools”重新打開。

我個人喜歡在 VS Code 中集成 Edge 開發工具窗口，我經常在我的開發工作流程中使用這兩種工具。我發現 Edge 控制枱可以作為內置調試控制枱的一個很好的補充。在調試時，我經常交替使用不同的窗口配置。有時我喜歡像這樣使用內置控制枱：

有時我使用這樣的窗口配置，顯示 Edge Dev Tools 的“Network”選項卡。在下面的例子中，我可以在我的應用程序中檢查流媒體服務的當前 Web 套接字連接，並在 VS Code 中查看單獨的消息：

為了獲得更大的靈活性，還可以從正在運行的 Edge 實例中打開開發工具並像往常一樣使用。事實上，VS Code 中集成的 Edge 開發工具窗口實際上是常規瀏覽器開發工具的屏幕截圖。我使用的另一個典型配置是這樣的，我只用 VS Code 打開各種代碼文件，通過外部 Edge 開發工具進行大部分調試。在這個配置中，一切仍然按照預期工作；在 VS Code 或瀏覽器開發工具窗口中可以設置斷點，但如果需要，我可以只使用瀏覽器進行所有測試和調試。下圖是我在 Windows 的機器上的配置——Edge 和 VS Code 在不同平台上的 UI 幾乎是一樣的，這對於使用多種操作系統的開發者來説可是太棒了：

另一個不可忽視的特性是 Edge Tools 擴展提供的內聯代碼分析。我發現這是對 ESLint 的一個很好的補充。這個功能完全集成到“問題”標籤；下面展示了該擴展如何顯示錯誤和問題：

對於儘可能有效地使用屏幕空間，我的最後一個建議是停靠調試工具欄。我發現當設置為“浮動”時，真的沒有一個好地方放它。

點擊 File > Settings > Features > Debug > Tool Bar Location 打開 VS Code 設置，設置為“docked”。

通過這個設置，調試工具欄停靠在左邊的面板上，只有在 VS Code 中選擇“Run and Debug”時才可見。

我還安裝了 StatusBar Debugger extension ，顧名思義，它將調試控件添加到 VS Code 狀態欄。我喜歡在 VS Code 中的“Run and Debug”面板不活躍時，在 UI 上補充不會形成干擾的調試控件，算是給調試快捷鍵點個贊吧。

從使用情況來看，VS Code 擴展的 Edge Tools 已被證明非常通用，我已經改為使用它作為我日常工作的主要 Web 開發環境。我發現的唯一的主要缺陷是無法從 VS Code 的 Edge 開發工具選項卡訪問 Vue.js Devtools Edge擴展 。我能想象得到，其他類似的擴展（比如 React Developer Tools ）也存在這樣的情況，雖然我沒有實際去驗證過這一點。但是我發現這並沒有給我帶來多大的不便，因為在標準的 Edge 開發工具窗口中 Vue.js 擴展仍然是完全可用的。儘管存在這個問題，我仍然強烈建議所有網頁開發人員都嘗試一下。

下面是一些關於配置和使用 Microsoft Edge Tools VS Code 擴展材料鏈接:

原文鏈接：

譯者介紹：

冬雨，小小技術宅一枚，現從事研發過程改進及質量改進方面的工作，關注研發、測試、軟件工程、敏捷、DevOps、雲計算、人工智能等領域，非常樂意將國外新鮮的 IT 資訊和深度技術文章翻譯分享給大家，已翻譯出版《深入敏捷測試》、《持續交付實戰》。