利用標準化的網頁平台功能、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 檔案。
漸進式 Web Apps
漸進式 Web Apps 採用開放網路技術,提供跨平台互通性。 它們在支援平台上像原生應用程式一樣運作,在其他瀏覽器上則像一般網站一樣。
Progressive Web Apps結合了網頁與編譯應用程式的優點,為使用者提供類似應用程式的體驗,並依其裝置量身打造。 漸進式網頁應用程式是一種網站,經過逐步強化,使其能像支援平台上已安裝的原生應用程式一樣運作,同時在其他瀏覽器上也能像一般網站一樣運作。
漸進式 Web Apps 的跨平台開發成本遠低於編譯式應用程式,後者需要為每個平台建立特定程式碼庫,例如為 Android、iOS 及每個桌面作業系統分別建立獨立程式碼庫。
請參閱進步Web Apps (PWA概述) 。
WebView2
WebView2 控制功能由 Microsoft Edge 驅動,讓您能將 HTML、CSS 和 JavaScript) (網頁技術嵌入原生應用程式中。 結合網頁平台的普及性與原生平台的全部功能。
下圖顯示應用程式的範圍,從最大覆蓋率到最大效能:
混合型應用程式介於這類光譜的中間,讓你能兼顧網頁平台的普及與強大,以及原生平台的強大與強大功能。
詳見 Microsoft Edge WebView2 介紹。
測試與自動化
以下是 Microsoft Edge 中自動化測試的工具:
- DevTools 協定 用於監控、檢查、除錯及設定瀏覽器。
- 利用 Origin 試驗 來嘗試實驗性的 API。
- Playwright 透過單一 API 提供跨瀏覽器自動化。
- Puppeteer 的 API 透過 DevTools 協定控制 Microsoft Edge。
- WebDriver 模擬使用者與 Microsoft Edge 的互動。
- WebHint Linting 會檢查程式碼的錯誤與最佳實務。
專為 Edge 設計的網頁開發技巧
Microsoft Edge 實作了基於標準的網頁功能和 API,你可以用來開發跨瀏覽器引擎運作的網站。 此外,Microsoft Edge 也提供一些專為 Edge 設計的網頁開發功能。
請參閱 Edge 專屬的網頁開發技巧。
Microsoft Edge IDE 整合
Microsoft 工具的多項功能提供整合開發,使用 Microsoft Edge、Visual Studio Code 及 Visual Studio,開發使用並完整整合於 Microsoft Edge 的產品、網頁及網頁應用程式。
Microsoft Edge 中的無障礙功能
您的網頁、網頁應用程式及支援網頁的產品的開發,透過 Microsoft Edge 及其工具生態系統中廣泛的無障礙功能,獲得了有力的支援。
請參閱 Microsoft Edge 的無障礙功能。
如何使用這些文件
以下章節是使用 Microsoft Learn 網站的建議。
在文章中放大圖片
要查看截圖或圖表的詳細資訊:
右鍵點擊圖片,然後選擇 在新分頁中開啟圖片。
關閉圖片分頁即可返回文章。
在「以標題篩選」的文字框中查找關鍵字和術語
多功能 的標題篩選 文字框支援:
- 目錄 (目錄) 。
- 關鍵字索引查詢。
- 文件全文檢索。
在左上角的 「依標題篩選 」框中,輸入一個詞彙或關鍵字即可找到:
如果找不到所需的文章,請在 所有 Microsoft Edge 文件中選擇「搜尋」:
全文搜尋頁面最初會搜尋所有 Microsoft Edge 文件。 或者,點擊 「查看所有結果 」連結以進行更廣泛的搜尋:
在 Microsoft Edge 開發者文件中提供回饋或回報問題
提供回饋或提交議題:
若要提交並查看文件特定頁面的回饋,請在頁面底部點擊 「此頁 」按鈕。