使用 Microsoft Edge 為 Web 進行開發

使用 Microsoft Edge DevTools、Microsoft Edge 擴充功能、漸進式 Web Apps、WebDriver 自動化、WebView2 等，透過 Microsoft Edge 開發 Web。

Microsoft Edge DevTools

Microsoft Edge 瀏覽器隨附內建的 Web 開發工具，稱為 Microsoft Edge DevTools。 DevTools 是一組 Web 開發工具，會出現在瀏覽器中轉譯的網頁旁邊。 DevTools 提供強大的方法來檢查網頁和 Web 應用程式並進行偵錯。 您甚至可以在 DevTools 環境中編輯原始程式檔並建立網站專案。

使用 DevTools，您可以執行下列動作：

• 使用即時工具搭配可視化介面，檢查、調整及變更網頁中元素的樣式。 檢查瀏覽器儲存內容以建構網頁的位置，包括 .html、 .css、 .js和 .png 檔案格式。

• 模擬您的網頁在不同裝置上的行為，並模擬行動環境，並以不同的網路條件完成。 檢查網路流量，並查看問題的位置。

• 使用斷點偵錯和即時控制台對 JavaScript 進行偵錯。 尋找 Web 應用程式的記憶體問題和轉譯問題。

• 尋找產品中的輔助功能、效能、相容性和安全性問題，並使用DevTools來修正找到的輔助功能問題。

• 使用開發環境，將 DevTools 中的變更與檔案系統和 Web 同步。

請參閱 DevTools概觀。

Microsoft Edge 延伸模組

建立 Microsoft Edge 的擴充功能，以新增或修改瀏覽器的功能。 擴充功能可改善瀏覽器體驗，以提供對目標物件很重要的特殊函式。

如果您的想法或產品是以特定網頁瀏覽器為基礎，或是特定網頁功能的改善，您可以建立Microsoft Edge 擴充功能。 隨附體驗的範例包括廣告封鎖程式和密碼管理員。

Microsoft Edge 擴充功能的結構類似於一般 Web 應用程式，通常包括：

• 包含基本平臺資訊的應用程式指令清單 JSON 檔案。
• JavaScript 檔案，定義瀏覽器擴充功能的行為。
• 定義使用者介面的 HTML 和 CSS 檔案。

請參閱 Microsoft Edge 擴充功能概觀。

漸進式 Web Apps

漸進式 Web Apps 使用開放式 Web 技術來提供跨平臺互操作性。 它們的運作方式就像支持平臺上的原生應用程式，就像其他瀏覽器上的一般網站一樣。

漸進式 Web Apps 結合最佳的 Web 和編譯應用程式，為使用者提供針對其裝置自定義的類似應用程式體驗。 漸進式 Web 應用程式是逐漸增強的網站，可在支援平臺上如同已安裝的原生應用程式一樣運作，同時像其他瀏覽器上的一般網站一樣運作。

漸進式 Web Apps 的跨平台開發成本遠低於針對每個平臺需要特定程式代碼基底的編譯應用程式，例如 Android、iOS 和每個桌面作業系統的個別程式代碼基底。

請參閱 ) 的漸進式 Web Apps (PWA 概觀。

WebView2

WebView2 控制件由 Microsoft Edge 提供技術支援，可讓您將 Web 技術 (HTML、CSS 和 JavaScript) 內嵌在原生應用程式中。 結合 Web 平臺的普遍性，以及原生平臺的完整功能。

下圖顯示從最大觸達範圍到最大電源的應用程式頻譜：

混合式應用程式在此範圍中，可讓您享受這兩種世界的最佳功能：Web 平臺的普遍性和強度，結合原生平台的強大功能和完整功能。

請參閱 Edge WebView2 Microsoft簡介。

測試和自動化

以下是在 Microsoft Edge 中自動化測試的工具：

• DevTools 通訊協定 可用來檢測、檢查、偵錯和配置檔瀏覽器。
• 使用 原點試 用來試用實驗性 API。
• Play 要 透過單一 API 提供跨瀏覽器自動化。
• Puppeteer 的 API 透過 DevTools 通訊協定控制Microsoft Edge。
• WebDriver 會模擬使用者與 Microsoft Edge 的互動。
• webhint Linting 會檢查程式代碼中的錯誤和最佳做法。

請參閱 Microsoft Edge 中的測試和自動化。

Microsoft Edge 的開發秘訣

建置在 Microsoft Edge 中運作的網站或 Web 應用程式時，有許多秘訣和訣竅需要注意，包括：

• 測試可能影響網站與 Microsoft Edge 相容性的新變更。
• 將使用者從 Internet Explorer 移至 Microsoft Edge。
• 在 Microsoft Edge 中設定追蹤防護。
• 從您的網站偵測Microsoft Edge。
• 自訂 [密碼顯示] 按鈕。
• 使用 User-Agent 用戶端提示偵測 Windows 11。

請參閱 Microsoft Edge 的開發秘訣。

Microsoft Edge IDE 整合

Microsoft工具的各種功能提供使用 Microsoft Edge、Visual Studio Code 和 Visual Studio 進行開發的整合，以開發在 Microsoft Edge 中使用和使用完整整合的產品、網頁和 Web 應用程式。

請 參閱Microsoft Edge IDE 整合。

Microsoft Edge 中的輔助功能

透過 Microsoft Edge 及其工具生態系統中廣泛的輔助功能功能，可強固支援網頁、Web 應用程式和已啟用 Web 的產品開發。

請參閱 Microsoft Edge 中的輔助功能。

如何使用此檔

下列各節是使用 Microsoft Learn 網站的秘訣。

在文章中縮放影像

若要檢視螢幕快照或圖表的詳細資料：

1. 以滑鼠右鍵按兩下影像，然後選取 [ 在新索引卷標中開啟映像]。

2. 關閉影像索引標籤以返回發行項。

在 [依標題篩選] 文本框中查閱關鍵詞和字詞

[依 標題 篩選] 文字框支援：

• 巡覽 TOC) (目錄。
• 索引字詞查閱關鍵詞。
• 檔的全文搜索。

在左上方的 [依 標題篩選 ] 方塊中，輸入要尋找的字詞或關鍵詞：

如果找不到所需的文章，請在 所有Microsoft Edge 文件中選取 [搜尋字詞]：

全文搜索頁面一開始會搜尋所有 Microsoft Edge 檔。 或者，單擊 [ 檢視所有結果 ] 連結以進行更廣泛的搜尋：

在 Microsoft Edge 開發人員檔中提供意見反應或報告問題

若要提供意見反應或輸入問題：

• 請連絡 Microsoft Edge DevTools 小組
• 請連絡 Microsoft Edge 擴充功能小組
• 請連絡 WebView2 小組

若要提交和檢視檔特定頁面的意見反應，請按下頁面底部的 [ 此頁面] 按鈕。