HTML、CSS 與 JS 線上執行

功能簡介

這個線上執行環境是一個用於前端實驗的小型線上程式碼編輯器。在三個具語法醒目提示的分頁中撰寫 HTML、CSS 和 JavaScript，預覽會隨著輸入即時更新，就像 CodePen 或 JSFiddle，但不需要帳號。內建的主控台會顯示 console.log() 的輸出和錯誤，並標出 JavaScript 中的行號，不用開啟開發人員工具也能除錯。因此在手機或借來的電腦上也很好用。

你可以用它試試 CSS 版面、為同事重現一個 bug、測試從 Stack Overflow 找到的程式碼片段、教導初學者，或快速勾勒一個原型。

使用方法

1. 在 HTML、CSS 和 JS 分頁中輸入程式碼，或按 範例 從一個小型計數器示範開始。分頁上的圓點表示該分頁含有程式碼。
2. 停止輸入 0.6 秒後，預覽會自動執行。指令碼較重時可以關閉 自動執行，準備好後再按 執行 或 Ctrl+Enter。
3. 在 主控台 中查看日誌、警告和錯誤，最新的一行總在最上面。物件、陣列、Map、Set 和 DOM 元素都會以精簡易讀的形式顯示。
4. 按 分享 把程式碼傳給別人。按 下載 ZIP 會把 index.html、style.css、script.js 分成三個檔案打包，可以直接放進實際專案；按 下載 HTML 把所有內容存成一個 index.html 檔案，任何瀏覽器都能開啟。

你的程式碼會保留在這個瀏覽器中，回來時依然還在。Tab 鍵會以兩個空格縮排。

範例

HTML：

<button id="go">Click me</button>

JavaScript：

document.querySelector('#go').addEventListener('click', () => {
  console.log('clicked at', new Date().toLocaleTimeString())
})

每點一次，主控台就會多一行。如果名稱拼錯了，主控台會顯示紅色的 ReferenceError，並標出它在 JS 分頁中發生的行號。

運作原理

三個面板的內容會合併成一份 HTML 文件，並載入到帶有 sandbox 屬性的 iframe 中，因此程式碼無法讀取本站的 Cookie 或儲存空間。框架中加入的一小段指令碼會把 console 呼叫和未捕捉的錯誤轉送給頁面，而且沒有任何內容會離開你的裝置。