使用步驟
- 用上方的按鈕在 HTML、CSS、JavaScript 三個編輯框之間切換並編寫程式碼。
- 預設停止輸入後自動執行，也可以關閉自動執行，手動點「執行」。
- 在控制台檢視輸出和報錯，滿意後點「下載 HTML」儲存。
引數說明
- 沙箱
- 預覽執行在隔離的沙箱裡，不能讀取本站的 Cookie 和本地儲存，也不能彈出對話方塊。
- 控制台
- 顯示 console.log、console.warn、console.error 的輸出以及未捕獲的錯誤和行號，最多保留最近 200 條。
- 下載
- 把三部分程式碼合併成一個 HTML 檔案，樣式放在 style 標籤裡，指令碼放在頁面末尾。
頁面是怎麼拼出來的
三個編輯器的內容會按下面的順序合併成一個文件。點「下載 HTML」得到的也是同樣的結構，只是下載檔案裡不包含把控制台輸出傳送到預覽下方頁面的那段小指令碼。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* 你的 CSS */
</style>
</head>
<body>
<!-- 你的 HTML -->
<script>
// 你的 JavaScript
</script>
</body>
</html>由於指令碼在你的 HTML 之後，可以直接使用 document.getElementById，不必等頁面載入完成。HTML 編輯器裡只需要寫 body 內部的內容，不要寫 html、head 或 body 標籤本身。預覽是一個只被允許執行指令碼的 iframe，這也是 alert 對話方塊和訪問本站 Cookie 都被禁止的原因。
常見問題
能引用外部的庫嗎？
可以，在 HTML 裡用 script 或 link 標籤引用 CDN 地址即可，例如 jsDelivr 上的庫。
為什麼 alert 沒有彈出？
沙箱禁止彈出視窗，alert、confirm 不會顯示，請改用 console.log 輸出到控制台。
程式碼會儲存嗎？
不會自動儲存，也不會上傳。關閉頁面前請下載 HTML 檔案。
隱私說明
本工具完全在瀏覽器中執行，檔案和文字都在你的裝置上處理，不會上傳到我們的伺服器。