Microsoft Edge IDE 整合
Microsoft 工具的各種功能提供使用 Microsoft Edge、Visual Studio Code 和 Visual Studio 進行開發的整合，以開發在 Microsoft Edge 中使用和使用完整整合的產品、網頁和 Web 應用程式。
適用于 Visual Studio Code 的 Microsoft Edge DevTools 擴充功能
適用于 Visual Studio Code 的 Microsoft Edge DevTools 擴充功能可讓您從Visual Studio Code內使用 Microsoft Edge 瀏覽器的Elements 工具和網路工具。
若不離開Visual Studio Code，請使用 Microsoft Edge DevTools 附加至實例或啟動 Microsoft Edge 的實例，然後：
- 檢視執行時間 HTML 結構。
- 變更網頁版面配置。
- 變更 CSS 樣式並修正樣式問題。
- 讀取主控台訊息。
- 檢視網路要求。
如需Visual Studio Code，請參閱Microsoft Edge DevTools 擴充功能。
Visual Studio Code中的開放原始碼檔案
Visual Studio Code實驗中的開放原始碼檔案可讓您使用 Microsoft Edge DevTools，但接著在 Visual Studio Code 中編輯檔案，而不是在 DevTools來源工具的程式碼編輯器中編輯檔案。
當您使用此實驗時，如果您使用 Visual Studio Code，而且您使用 DevTools 來變更 CSS 規則，則不再需要在 DevTools 的 Sources 工具中使用程式碼編輯器。 您可以直接在 Visual Studio Code 中使用程式碼編輯器。 當您開啟此實驗時，本機檔案會有不同的處理方式。
請參閱在 Visual Studio Code 中開啟原始程式檔。
在 Visual Studio Code 中偵錯 Microsoft Edge
Visual Studio Code包含適用于 Microsoft Edge 的內建偵錯工具，可啟動瀏覽器或附加至已在執行中的瀏覽器。
此內建偵錯工具可讓您逐行偵錯前端 JavaScript 程式碼，並直接從Visual Studio Code查看 console.log() 語句。
請參閱在 Visual Studio Code 中偵錯 Microsoft Edge。
適用于 Visual Studio Code 的 webhint 擴充功能
使用可自訂的 Linting 工具 webhint 來改善網站的功能，包括：
- 協助工具。
- 性能。
- 跨瀏覽器相容性。
- PWA 相容性。
- 安全性。
webhint 會檢查程式碼中的最佳做法和常見錯誤。 識別並修正檔案中的問題，包括 HTML、CSS、JavaScript 和 TypeScript。 提示會在文字編輯器中顯示為波浪底線，並摘要于 [ 問題 ] 窗格中。
注意：自 2022 年 4 月起，不再維護 Visual Studio Code 的 webhint 延伸模組。 如需Visual Studio Code，請參閱Microsoft Edge DevTools 擴充功能。
適用于 Web 開發的 Visual Studio
Microsoft Visual Studio 是 IDE) (整合式開發環境。 使用它來編輯、偵錯、建置及發佈您的 Web 應用程式。 這是功能豐富的程式，可用於 Web 開發的許多層面。
除了大部分 IDE 提供的標準編輯器和偵錯工具之外，Visual Studio 還包含可簡化開發程式的功能，包括：
- 編譯 器。
- 程式碼完成工具。
- 圖形設計工具。
- 還有更多功能。