Edge 開發者新功能整理：SPA 效能診斷、DevTools 除錯與 WebMCP

Microsoft Edge 近期的網頁開發更新，涵蓋效能測量、除錯、AI 代理與表單文字操作。實際使用時，關鍵不只在功能做什麼，也要留意目前是否已正式提供、僅供測試，或仍停留在規劃階段。部分功能已列入 Edge 或 DevTools 文件，部分仍屬實驗性質；原生選單元素則還不是可供正式環境依賴的功能。16333940

看見單頁應用程式的頁內轉換

傳統的頁面載入指標，無法完整呈現單頁應用程式（SPA）的使用體驗：使用者切換畫面時，網頁可能沒有重新載入整份文件。Edge 的 Performance API 新增兩種項目，協助開發者觀察這類轉換：soft-navigation 回報由使用者互動觸發、發生於同一文件內的歷史狀態變更；interaction-contentful-paint 則回報互動修改頁面部分區域後，新內容何時繪製出來。40

Edge 版本資訊也提到用於 SPA 效能指標收集的軟導覽判定機制。這些項目可協助開發者追查頁內轉換何時發生、轉換後的內容何時呈現；它們提供的是診斷線索，不會自動替網站改善效能。3940

分辨 JavaScript 與瀏覽器的工作時間

JavaScript Self-Profiling 標記可在 JavaScript 取樣資料之間，補上瀏覽器執行工作的背景資訊，例如樣式計算、版面配置、繪製與垃圾回收。開發者因此較容易分辨，時間花在應用程式程式碼上，還是花在瀏覽器的其他工作上。若要把這項能力納入正式工作流程，應先確認目前 Edge 文件所列的版本與功能可用性。1

在 DevTools 重送或修改網路請求

Network 工具中的 Resend（重送） 可重新送出已擷取的請求，不必重新載入頁面，適合用來檢查重複送出時的請求行為。18

較新的 Edit and resend as Fetch（編輯並以 Fetch 重送） 工作流程，則可修改擷取到的請求，再將它作為 fetch() 呼叫送到主控台測試。這些控制項讓請求除錯更方便，但不會讓底層網路連線變快。Microsoft 的開發者更新介紹了新的工作流程，Edge 文件則說明重送請求的操作。118

讓網站為瀏覽代理提供操作方式：WebMCP

WebMCP 是一種新興做法，讓網站能向瀏覽代理提供結構化操作。目標是讓代理透過網站明確宣告的工具或操作與網站互動，而不必只靠視覺方式判讀頁面。Microsoft 將 WebMCP 定位為可供測試的早期功能；開發者應視其為實驗性能力，不宜假設所有使用者都已能使用。1

在表單欄位中操作文字範圍：OpaqueRange

OpaqueRange 用來表示文字型 <input> 或 <textarea> 內仍會隨內容變化的文字範圍。開發者可據此打造與特定文字位置相關的互動，例如定位相關介面或套用醒目標示，而不必直接暴露控制項內部的文字節點。Edge 152 的網頁平台更新已列出 OpaqueRange。133

Web Install API：可透過 Origin Trial 測試

Web Install API 讓網站透過非同步的 navigator.install()，請求使用瀏覽器內建的安裝流程來安裝另一個網頁應用程式。Microsoft 曾宣布，可透過 Edge 的 Origin Trial 在網站上測試這項 API。Origin Trial 是提供測試的途徑，不代表所有瀏覽器或使用者都已普遍支援。6

原生 <menu> 元素仍在規劃中

Microsoft 也提出一項原生 <menu> 元素計畫，預期提供內建的選單行為。目前它仍屬規劃中的功能，開發者不應將它視為已普遍推出，或在正式環境中依賴它；採用前應先確認實際支援狀態。1

開始動手前，先確認功能狀態

若要實際測試，Edge 文件已說明如何在 DevTools 重送請求，Edge 152 的更新也列出 OpaqueRange；Web Install API 則有已公布的 Origin Trial 測試途徑。至於軟導覽效能指標、WebMCP 與 JavaScript 分析標記，使用前應確認目前版本及測試要求。原生選單元素目前仍是計畫中的功能。1618333940