HTML/CSS/JS 線上執行

關於HTML/CSS/JS 線上執行

HTML/CSS/JS 線上執行把 index.html、style.css、script.js 組合成一個網頁，輸入停下來後自動重新整理預覽，也可以關掉自動重新整理、按 Ctrl+Enter 手動執行。預覽執行在隔離的沙箱裡，不會影響本站。下方的控制檯顯示 console.log、警告和報錯，報錯會標出是 script.js 的第幾行，點一下就跳過去；控制檯底部還可以直接輸入 JavaScript 在頁面裡執行。

預覽寬度可以切換成手機（390px）、平板（768px）或整個視窗，也可以在新視窗裡開啟。“庫”裡能一鍵加上 jQuery、Vue、React、Babel（寫 JSX）、Bootstrap、Tailwind CSS、Chart.js、D3、three.js 等，從公共 CDN 載入。程式碼可以整理格式，匯出成一個 HTML 檔案或 ZIP，也可以生成分享連結發給別人。只想格式化或壓縮程式碼，用HTML 格式化。

HTML/CSS/JS 線上執行怎麼用

1. 1
   寫程式碼

   在 HTML、CSS、JS 三個標籤裡寫程式碼，或開啟示例。

2. 2
   看預覽

   右邊實時顯示網頁，控制檯顯示輸出和錯誤。

3. 3
   匯出或分享

   下載 HTML 檔案、ZIP，或複製分享連結。

為什麼用熊仔工匠

• 實時預覽

  停止輸入後自動重新整理，也可以手動執行。

• 控制檯

  顯示 console.log 和報錯，能直接執行 JavaScript。

• 手機平板寬度

  一鍵切換預覽寬度，檢查響應式佈局。

• 常用前端庫

  jQuery、Vue、React、Bootstrap、Tailwind 等一鍵加上。

• 安全隔離

  預覽在沙箱裡執行，程式碼不上傳。