在瀏覽器中編輯 HTML，意思是在目前的分頁中撰寫標記與 CSS，並即時看到那段程式碼的渲染結果，而其中控制最嚴格的做法，是使用一款沙箱化編輯器，它最多接受 50,000 個字元的 HTML 與 30,000 個字元的 CSS，同時封鎖所有腳本與遠端資源。最乾淨的實作方式，是並列式的瀏覽器工具，搭配兩個純文字編輯器與受限的本機預覽，例如 Online HTML Editor。該編輯器使用 iframe，搭配空的沙箱權杖清單，以及預設拒絕的內容安全政策(Content Security Policy)，因此 JavaScript、表單提交、快顯視窗、導覽，以及外部資源，全都會在設計上遭到封鎖。預只會在你按下「Update preview」按鈕時重新整理，沒有任何內容會被上傳、儲存到帳號，或傳送至 API。這樣的結果，就是一種快速、獨立的方式，讓你學習標記、肉眼檢視一段版型片段，或是在把某個靜態元件想法複製到安全防護截然不同的真實專案之前先做確認。
「在瀏覽器中編輯 HTML」實際上涵蓋了什麼
搜尋「在瀏覽器中編輯 HTML」時，結果會分成三種截然不同的工作，而把它們混為一談，是選錯工具最快的途徑。第一種工作是檢查或暫時修改並非由你所編寫的網頁，這正是覽器內建 DevTools 的設計目的。第二種工作是在磁碟上開啟一個靜態檔案並在本機預覽，這正是 file:// URL 或一個小型靜態伺服器所負責的工作。第三種工作是在目前的分頁中，組合一段自給自足的 HTML 與 CSS 片段，以學習某個標籤、驗證一個版型想法，或分享一個靜態元件，而這正是沙箱化瀏覽器內編輯器能派上用場之處。
本文聚焦於第三種工作。當你需要對正式上線的網站進行除錯時，沙箱化編輯器是 DevTools 的差勁替代品;而它也無法像真正的靜態伺服器那樣取用遠端資源。它能做到的，是為你提供一個穩定的雙窗格工作區，讓 HTML 與 CSS 並排擺在一起，而全新預覽只需一次點擊。Online HTML Editor 正是專為這種工作流程而打造，本文的其餘部分將逐步說明它的運作方式、其沙箱允許的內容，以及它的極限所在。
為何沙箱化並列式編輯器能解決「快速測試」這項工作
當你想在瀏器中編輯 HTML 時，常見的誘惑是開一個空白分頁、貼上一段片段，然後依瀏覽器來渲染它。這確實可行，但只要你的片段超出單一段落的範圍，就會立刻帶來三個問題。第一，沒有明確的地方可以安放你的 CSS，因此樣式會散落於行內屬性、style 區塊，以及某個你早已忘記的分檔案中。第二，片段中的任何 JavaScript 會立即執行，並擁有對你分頁的完整存取權，包括 cookie、剪貼簿，以及網址列。第三，諸如 Google Fonts、CDN 圖片，或第三方樣式表等外部資源，會在未經任何審核的情況下載入，這可能會洩漏你正在查看的網頁，或在你離線時悄悄地失敗。
沙箱化覽器內編輯器一次解決了上述三個問題。HTML 與 CSS 分別放在兩個具名的 textarea 中，因此標記與樣式表在視覺上是分離的，也方便複製。預覽是在 iframe(搭配空的沙箱權杖清單) 中渲染的，這意味著該 iframe 會以獨立來源(uniqu origin)執行、不允許任何腳本，而預內的程式碼也無法碰承載它的網頁。預覽還掛載了預設拒絕的內容安全政策，因此即使你忘了腳本已被封鎖，而貼上了 script 標籤，瀏覽器仍會拒絕執行。
由於沒有任何東西會離開你的分頁，這個工作流程在本質上也是私密的。預覽背後沒有上傳步驟、沒有帳號，也沒有 API 呼叫。這對一款你只是為了學習某個標籤，或確認某個 flexbox 想法是否真能運作，而隨手取用的工具來說，是正確的預設行為;而 Online HTML Editor 採用的，正是同樣的預設。
如何使用 Online HTML Editor 在瀏覽器中編輯 HTML
這款編輯器刻意設計得很精簡，因此下列步驟涵蓋了從開啟工具，到複製你所信任的結果，這整個完整的工作流程。
- 在瀏覽器中開啟 Online HTML Editor。頁面載入後，左側與右側各有一個空白編輯器，並在同一個畫面上顯示一個預覽區域。
- 在左側編輯器中輸入或編輯一段範圍明確的 HTML 片段。請讓該片段保持自給自足:一個 div 搭配一個標題與一段段落，就已足以觀察渲染行為。HTML 欄位最多接受 50,000 個字元。
- 在右側編輯器中加入選用的 CSS。請將右側窗格視為你的樣式表，而非第二個 HTML 區域;CSS 內部不區分大小寫的結束樣式序列會被中和掉，因此某個值無法脫逃而成為新的 HTML 元素。
- 按下 Update preview 按鈕，以建立一份全新的 srcdoc 文件，並將其放入沙箱化的 iframe。在你按下按鈕之前，預覽不會有任何變動，因此你在輸入時的編輯狀態能保持穩定。
- 在預覽區域中檢視結果。行內樣式以及 data 或 blob 圖片會被渲染出來，而遠端字型、腳本、表單，以及導覽則不會。
- 編輯任一窗格，然後再次按下 Update preview，以進行迭代。當你想把片段搬進真實專案時，直接從編輯器中複製你所滿意的 HTML 與 CSS 即可。
沙箱內部:預覽允許與封鎖了什麼
預覽是圍繞著一小組明確規則所打造，在開始之前先閱讀下表，可以省下「為什麼我的圖片沒載入」這種鬼打牆的循環。允許的行為刻意收得很窄，因為目標是測試標記與樣式，而不是重現一個正式上線的網頁。
| 能力 | Online HTML Editor 預覽中的行為 |
|---|---|
| JavaScript 執行 | 封鎖。iframe 採用空的沙箱權杖清單，因此並不存在 allow-scripts 權限。 |
| 行內樣式 | 允許。右側編輯器中的 CSS 會作為樣式表，套用於 srcdoc 之中。 |
| 外部 CSS、字型、圖片、影片、API、iframe | 封鎖。內容安全政策預設拒絕所有資源。 |
| Data 或 Blob 圖片 | 允許，以利於自給自足的實驗。 |
| 表單提交與導覽 | 封鎖。沒有 target、沒有 form action，預覽也無法對宿主頁面進行導。 |
| Base URL 變更 | 封鎖。base 標籤無法將預覽重新導向至另一個來源。 |
| 對宿主分頁的同來源存取 | 不可用。iframe 以獨立來源(unique origin)執行。 |
| 使用者上傳的內容 | 無。編輯器與預覽都停留在目前的分頁中;沒有任何內容會被傳送到伺服器，或儲存到帳號。 |
有一個值得注意的細節:你在片段中額外加入的第二個內容安全政策 meta 標籤，並無法放寬這些規則。覽器的政策是相互結合，而不是相互取代，因此較嚴格的規則會勝出。這正是讓片段無法悄悄把預覽變成真正網頁的機制。
瀏覽器內編輯器相較於真正 IDE 的極限
瀏器內編輯器並不能取代完整的開發環境，假裝它可以，只會浪費一次除錯的時間。Online HTML Editor 不會剖析你的標記、對其進行重構，或對可存取性問題提出警告;它只是把你寫的東西渲染出來。它不會執行建置系統，因此 Sass、PostCSS，以及元件框架之類的功能都不在它的範圍之內。它不會跨瀏覽器進行測試，因此預覽反映的是你所開啟工具的那個瀏覽器引擎，包括其預設的表單控制項外觀，以及 CSS 功能支援。
此外，還有一個與安全性相關的觀點很重要。預覽並非你所打算發布到其他地方的程式碼的淨化器。iframe 與內容安全政策會在你實驗的過程中保護你的分頁，但若少了這層包覆，把同一份 HTML 複製到真正的網站中，就會形成截然不同的安全防護。請把這款編輯器當作素描本，接著在最終的專案中驗證語意、響應式行為、可存取性、SEO，以及你的正式環境 CSP。若需要更進一步、確實需要腳本執行環境的前端工作，另一個獨立的沙箱化 JavaScript Playground 才是合理的下一步，而不是硬把 HTML 編輯器拗成那個用途。
如果你需要更視覺化的方式來走過常見的元件模式，「以視覺化方式走過在 CSS 與 HTML 中製作按鈕」這篇文章是很自然的延伸，它把同一款編輯器當作它的素描本。
覽器內編輯器何時是正確的選擇
當重點在於片段本身、而非圍繞它的應用程式時，就該拿起 Online HTML Editor。它適合用來學習新的標籤或偽類、肉眼檢視 flex 容器是否真的會如你所預期地換行、勾勒一個靜態卡片或主視覺、為一次性的電子郵件風格版型打草稿，或檢查一項小幅度 CSS 調整在你將實際測試的同一個瀏覽器中的呈現效果。它不適合用於任何依賴遠端資源的片段、任何需要執行 JavaScript 的網頁，或任何需要跨瀏覽器截圖的工作流程。在這些情況下，請改用真正的靜態專案、元件框架，或與你所關心的正式環境相符的託管預覽服務。
如果你正在權衡各種選項，Format HTML in Notepad++ Through Your Browser 對此有詳細的介紹。