共用方式為


使用 Microsoft Edge 進行網頁開發

利用標準化的網頁平台功能、Microsoft Edge DevTools、Microsoft Edge 擴充、Progressive Web Apps、WebDriver 自動化、WebView2 等,為 Microsoft Edge 開發網頁。

關於如何使用 Microsoft Edge 的最終使用者文件,請參見 Microsoft Edge 學習 & 幫助

版本資訊

欲掌握 Microsoft Edge 及 Chromium 開源專案中網頁平台功能變更的最新動態,請參閱:

Microsoft Edge 的實驗性 API

利用 Origin 試用期,在有限時間內試用實驗性的 API 與功能。 使用 Origin 試用時,造訪你網站的 Microsoft Edge 用戶可以執行使用實驗性 API 和功能的程式碼。

請參閱:

Microsoft Edge DevTools

Microsoft Edge 瀏覽器內建了稱為 Microsoft Edge DevTools 的網頁開發工具。 DevTools 是一組網頁開發工具,會出現在瀏覽器渲染後的網頁旁。 DevTools 提供了強大的檢查與除錯網頁與網頁應用程式的方法。 你甚至可以編輯原始碼檔案並建立網站專案,全部都在 DevTools 環境中。

使用 DevTools,你可以做以下事情:

  • 使用具視覺介面的即時工具檢查、調整並更改網頁中元素的樣式。 檢查瀏覽器儲存內容以建立網頁的位置,包括.html、、.css.js.png 和 檔案格式。

  • 模擬你的網頁在不同裝置上的表現,模擬行動環境,並搭配不同的網路條件。 檢查網路流量並找出問題所在位置。

  • 用斷點除錯和 live console 來除錯你的 JavaScript。 找出網頁應用程式的記憶體問題和渲染問題。

  • 找出產品中的無障礙性、效能、相容性與安全性問題,並使用 DevTools 修正發現的無障礙問題。

  • 使用開發環境來同步 DevTools 中的變更與檔案系統及網頁同步。

詳見 DevTools 概述

Microsoft Edge 延伸模組

為 Microsoft Edge 建立擴充功能,以新增或修改瀏覽器的功能。 擴充功能提升瀏覽器體驗,提供對目標受眾重要的專門功能。

如果你有基於特定瀏覽器或特定網頁功能的改進,可以建立 Microsoft Edge 擴充功能。 伴遊體驗的例子包括廣告阻擋器和密碼管理器。

Microsoft Edge 擴充套件的結構類似一般網頁應用程式,通常包含:

  • 一個包含基本平台資訊的應用程式清單 JSON 檔案。
  • 一個定義瀏覽器擴充功能的 JavaScript 檔案。
  • 定義使用者介面的 HTML 與 CSS 檔案。

請參閱 Microsoft Edge 擴充功能的概述

漸進式 Web Apps

漸進式 Web Apps 採用開放網路技術,提供跨平台互通性。 它們在支援平台上像原生應用程式一樣運作,在其他瀏覽器上則像一般網站一樣。

Progressive Web Apps結合了網頁與編譯應用程式的優點,為使用者提供類似應用程式的體驗,並依其裝置量身打造。 漸進式網頁應用程式是一種網站,經過逐步強化,使其能像支援平台上已安裝的原生應用程式一樣運作,同時在其他瀏覽器上也能像一般網站一樣運作。

漸進式 Web Apps 的跨平台開發成本遠低於編譯式應用程式,後者需要為每個平台建立特定程式碼庫,例如為 Android、iOS 及每個桌面作業系統分別建立獨立程式碼庫。

請參閱進步Web Apps (PWA概述)

WebView2

WebView2 控制功能由 Microsoft Edge 驅動,讓您能將 HTML、CSS 和 JavaScript) (網頁技術嵌入原生應用程式中。 結合網頁平台的普及性與原生平台的全部功能。

一個應用程式的示意圖,左側和左上方是原生 UI 區域,右上角和下方是 WebView2 的 UI 區域

下圖顯示應用程式的範圍,從最大覆蓋率到最大效能:

應用程式的範圍從最大覆蓋但較少的運算,到最佳的混合混合,再到最大運算但較少的覆蓋範圍

混合型應用程式介於這類光譜的中間,讓你能兼顧網頁平台的普及與強大,以及原生平台的強大與強大功能。

詳見 Microsoft Edge WebView2 介紹

測試與自動化

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

  • DevTools 協定 用於監控、檢查、除錯及設定瀏覽器。
  • 利用 Origin 試驗 來嘗試實驗性的 API。
  • Playwright 透過單一 API 提供跨瀏覽器自動化。
  • Puppeteer 的 API 透過 DevTools 協定控制 Microsoft Edge。
  • WebDriver 模擬使用者與 Microsoft Edge 的互動。
  • WebHint Linting 會檢查程式碼的錯誤與最佳實務。

請參見 Microsoft Edge 的測試與自動化

專為 Edge 設計的網頁開發技巧

Microsoft Edge 實作了基於標準的網頁功能和 API,你可以用來開發跨瀏覽器引擎運作的網站。 此外,Microsoft Edge 也提供一些專為 Edge 設計的網頁開發功能。

請參閱 Edge 專屬的網頁開發技巧

Microsoft Edge IDE 整合

Microsoft 工具的多項功能提供整合開發,使用 Microsoft Edge、Visual Studio Code 及 Visual Studio,開發使用並完整整合於 Microsoft Edge 的產品、網頁及網頁應用程式。

請參見 Microsoft Edge IDE 整合

Microsoft Edge 中的無障礙功能

您的網頁、網頁應用程式及支援網頁的產品的開發,透過 Microsoft Edge 及其工具生態系統中廣泛的無障礙功能,獲得了有力的支援。

請參閱 Microsoft Edge 的無障礙功能。

如何使用這些文件

以下章節是使用 Microsoft Learn 網站的建議。

在文章中放大圖片

要查看截圖或圖表的詳細資訊:

  1. 右鍵點擊圖片,然後選擇 在新分頁中開啟圖片

  2. 關閉圖片分頁即可返回文章。

在「以標題篩選」的文字框中查找關鍵字和術語

多功能 的標題篩選 文字框支援:

  • 目錄 (目錄) 。
  • 關鍵字索引查詢。
  • 文件全文檢索。

在左上角的 「依標題篩選 」框中,輸入一個詞彙或關鍵字即可找到:

多功能的「依標題篩選」文字框,用於瀏覽目錄、文件搜尋及關鍵字索引查詢

如果找不到所需的文章,請在 所有 Microsoft Edge 文件中選擇「搜尋

若找不到標題詞或索引詞,則提供全文搜尋所有 Microsoft Edge 文件的選項

全文搜尋頁面最初會搜尋所有 Microsoft Edge 文件。 或者,點擊 「查看所有結果 」連結以進行更廣泛的搜尋:

全文搜尋頁面最初會搜尋所有 Microsoft Edge 文件,或者你可以點擊「查看所有結果」的連結進行更廣泛的搜尋

在 Microsoft Edge 開發者文件中提供回饋或回報問題

提供回饋或提交議題:

若要提交並查看文件特定頁面的回饋,請在頁面底部點擊 「此頁 」按鈕。