Microsoft Edge 讓您透過兩種截然不同的方式編輯 HTML：透過 F12 開發者工具在即時頁面上編輯，或透過瀏覽器內建的 HTML 與 CSS 編輯器搭配沙箱化預覽。「線上 HTML 編輯器」採用第二種方式，完全在您已開啟的瀏覽器分頁中運作，因此您輸入的標記與 CSS 從不離開瀏覽器。編輯器嚴格區隔您的程式碼與其顯示內容：一個 HTML 面板、一個 CSS 面板，以及一個僅在您要求時才重新建立的預覽窗格。由於預覽位於沙箱化 iframe 中，採用預設拒絕的內容安全政策 (Content Security Policy)，指令碼、表單、快顯視窗、導覽及遠端資源皆會被拒絕，這正是大多數人在學習標記或繪製靜態元件時所想要的操作表面。本文將逐步說明如何在 Edge 中開啟此工具、各面板的功能，以及受限的預覽如何在您實驗時保護您。
在 Microsoft Edge 中編輯 HTML 的兩種方式
Microsoft Edge 內建可在瀏覽器中任何已載入頁面上進行編輯的開發者工具。按下 F12 (或 Ctrl+Shift+I) 開啟開發者工具，選擇「元素」(Elements) 面板，然後雙擊標記、屬性或文位元組點即可即時修改。編輯僅影響該工作階段；重新整理頁面會還原伺服器傳送的原始標記。該工作流程非常適合用於診斷實際網站上的版面配置、色彩或間距問題。
然而，若要從頭撰寫新的程式碼片段，開發者工具便顯得笨拙。沒有便利的位置可以貼上完整的 HTML 文件及其對應的 CSS、無法重設為乾淨狀態，也無法保證您範例中的干擾指令碼不會影響您正在測試的頁面。獨立的瀏覽器內 HTML 與 CSS 編輯器更適合這類工作。
開發者工具元素面板 vs 並排編輯器
兩種工具皆可編輯 HTML，但它們是為不同用途所設計。下表列出您在一般 Edge 工作階段中會感受到的實際差異。
| 功能 | Edge 開發者工具元素面板 | 線上 HTML 編輯器 |
|---|---|---|
| 在 Edge 中已載入的即時頁面上編輯標記 | 是 | 否 — 使用獨立的沙箱化 iframe |
| 從頭撰寫新的限定範圍 HTML/CSS 片段 | 不便 | 是 — 兩個並排的純文字面板 |
| 執行您的 JavaScript | 是，於頁面內容中執行 | 否 — 沙箱阻擋指令碼 |
| 載入外部樣式表、字型、影像 | 是，受頁面政策規範 | 否 — CSP 預設拒絕 |
| HTML 輸入大小限制 | 無固定限制 | 50,000 字元 |
| CSS 輸入大小限制 | 無固定限制 | 30,000 字元 |
| 渲染觸發時機 | 即時，每次按鍵皆更新 | 明確按下「更新預覽」按鈕 |
| 最適用於 | 診斷即時網站 | 學習標記、繪製元件 |
線上 HTML 編輯器在 Edge 中的功能
線上 HTML 編輯器會在瀏覽器分頁中開啟，左側為 HTML 編輯器，右側為 CSS 編輯器，並提供本機預覽。兩個編輯器僅接受純文字，並維持固定的大小限制 — HTML 為 50,000 字元，CSS 為 30,000 字元。沒有檔案上傳、無需帳號，也沒有 API 呼叫；兩個編輯器的內容皆存在於目前的瀏覽器分頁中。
按下「更新預覽」時，工具會組裝一份完整的 HTML 文件，並使用 srcdoc 屬性將其置入 iframe 中，該屬性在 MDN 中有記載，是內嵌整份文件的做法。該 iframe 帶有空白的沙箱權杖清單，這表示指令碼、快顯視窗、表單提交、頂層導覽、下載及同源存取皆無法使用，這與 MDN 中 iframe sandbox 屬性參考的說明完全一致。結果就是預覽僅顯示您的標記，而不會執行它。
這兩項防護機制共同形成預設拒絕的操作表面：即使您的片段嘗試載入遠端樣式表、擷取影像或提交表單，請求在離開 iframe 之前就會被拒絕。
如何使用並排編輯器在 Edge 中編輯 HTML
請依照下列步驟，在 Microsoft Edge 中處理限定範圍的 HTML 與 CSS 片段。
- 在新的瀏覽器分頁中開啟線上 HTML 編輯器。
- 在左側編輯器中輸入或貼上您的限定範圍 HTML 片段。請保持標記自足 — 不使用外部樣式表、字型、影像、指令碼或 iframe。
- 將您的 CSS 規則加入右側編輯器。行內宣告與樣式表規則皆可使用；遠端字型或背景影像 URL 將會被預覽拒絕。
- 按下「更新預覽」。該工具會建構全新的 srcdoc 文件，套用預設拒絕的內容安全政策，將其放入沙箱化 iframe 中，並顯示結果。
- 檢查渲染後的預覽，返回任一編輯器修改數值，然後再次按下「更新預覽」以重新渲染。預覽不會在您輸入時自動重新整理。
驗證沙箱是否運作的一個簡單方法：在 HTML 編輯器中放入 <script>alert(1)</script> 標記，按下「更新預覽」，觀察到沒有任何反應。相同的測試也適用於 <img src="https://example.com/cat.png"> — 影像將無法載入。
受限預覽實際阻擋了什麼
預覽 iframe 是基於兩項結合的防護機制所建構。sandbox 屬性被賦予空白權杖清單，因此不會授予任何強大功能。此外，內容安全政策會在 srcdoc 文件內傳遞，所有資源類型皆預設拒絕；唯一會載入的樣式是行內宣告，唯一允許的影像是 data URL 或 Blob URL。
表單提交也已停用，基底 URL 會被移除，您在標記中包含的任何第二個 CSP 都無法放寬外層政策，因為瀏覽器政策是結合而非取代。CSS 結束樣式序列會在被注入樣式表之前先行中和，因此 CSS 值無法突破至新的 HTML 元素。這些都不會改變您輸入的底層 HTML — 您的程式碼會在編輯器中原樣保留 — 但預覽的操作表面比一般頁面更小。
您可以貼上片段、觀察版面配置如何重排、複製結果，然後在其他地方重複使用，而無需擔心您的 Edge 工作階段已遭到變更。
編輯器限制與無法預覽的內容
兩個輸入皆有限制。HTML 編輯器最多接受 50,000 字元，CSS 編輯器最多 30,000 字元。作為參考，標記面板可容納大約 800 到 1,000 行一般 HTML，而 CSS 面板可容納約 400 到 600 行，因此大多數靜態元件實驗皆可從容容納。算術非常簡單：50,000 字元減去 30,000 字元等於 HTML 編輯器多出 20,000 字元的餘裕。
即使技術上允許，仍有幾類標記在預覽中無法正確顯示：
- 外部樣式表、網頁字型、背景影像及 CDN 代管的指令碼會被沙箱阻擋。
- <video>、<audio> 及 <iframe> 元素不會擷取遠端媒體或內容。
- JavaScript 不會執行。若您需要獨立的 JS，請使用獨立的 JavaScript Playground 來執行隔離的 worker 程式碼。
由於 srcdoc 渲染取決於主控瀏覽器，預覽使用 Edge 本身的 CSS 引擎、表單控制項與預設值。頁面會被賦予一個簡潔的中性主體邊界與系統字型作為基準，這就是為什麼您自己的 CSS 仍是具權威性的內容。
何時開發者工具仍是正確的選擇
線上 HTML 編輯器是撰寫與測試的操作表面，並非 Edge 開發者工具的替代品。當您在檢查您未建置之頁面的 DOM、分析效能、觀察網路請求、對已部署的網站進行除錯，或逐步執行 JavaScript 時，請繼續使用 F12。這些工作皆非編輯器所設計的用途。
同樣地，編輯器無法取代完整的 IDE、建置系統、跨瀏覽器測試或生產環境的 CSP 稽核。請將其視為限定範圍標記、版面配置實驗及小型靜態元件的快速暫存區。當您將片段複製到實際專案時，請重新檢查無障礙功能、語意結構、回應式行為，以及目的地網站的安全性內容。預覽是一個受控的測試操作表面，並非用於清理您打算發布的內容。