用於 VS Code 的 Edge 開發工具擴充套件太棒了,因此我放棄了 Chrome

語言: CN / TW / HK

我已經使用 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,可以訪問他們的主頁獲取你的作業系統對應的最新版本:

注意:如果你使用的是 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 資訊和深度技術文章翻譯分享給大家,已翻譯出版《深入敏捷測試》、《持續交付實戰》。