UrsaKit LogoUrsaKit

JavaScript 網上工具

在隔離的瀏覽器框架執行 JavaScript 並查看主控台輸出。

原始碼行數: 7 · 字元: 203
範本
檢查結果:未發現語法問題。

網上 JavaScript 練習場是什麼？

網上 JavaScript 練習場是把程式編輯器接到瀏覽器主控台的環境：寫一段程式、按「執行」、直接看輸出，不用安裝 Node、開開發者工具或建立檔案。

這是檢查日期工具函數、比較兩個陣列方法，或確認 promise 會解析成什麼最快的辦法。這裡的每次執行都在你電腦上的沙箱 iframe 內進行，程式碼碰不到這個頁面的其他部分。

如何網上執行 JavaScript

  1. 在 JavaScript 面板輸入或貼上程式，或從四個模板開始改。
  2. 先看語法檢查面板：acorn 會在執行前報出第一個解析錯誤與行、列。
  3. 按「執行」，或開啟「自動執行」，停筆約一秒後重新執行。
  4. 觀察主控台面板：log、info、warn、error 與完成值會依序列出，並附上總執行時間。
  5. 碰到 document.body 的程式碼會在沙箱輸出框架內渲染，不會動到這個頁面。
  6. 按「停止」可終止失控的循環，之後再格式化、複製或下載成 snippet.js。

JavaScript 執行範例

輸出數值與物件

const user = { name: "Ada", roles: ["admin"] }
console.log(user, 42)
LOG  {
  "name": "Ada",
  "roles": [
    "admin"
  ]
}
LOG  42

執行前先抓出語法錯誤

let x = ;
語法檢查：Unexpected token (1:9)

頂層 await

const wait = (ms) => new Promise((r) => setTimeout(r, ms))
await wait(100)
console.log("done after 100 ms")
LOG  done after 100 ms
執行時間 104 ms

JavaScript 練習場與瀏覽器開發者工具

面向這個練習場DevTools 主控台本機 Node.js
安裝打開頁面就行，不用安裝在任何頁面開 DevTools安裝 Node 並啟動 REPL
隔離沙箱 iframe，碰不到這個頁面對被除錯的頁面有完整存取權對你的檔案系統有完整存取權
失控循環按「停止」會換掉 iframe關掉分頁Ctrl+C 結束行程
編輯體驗Monaco 編輯器，有行號、模板與格式化單行提示，附歷史紀錄編輯器加 REPL，兩個視窗
分享複製程式或下載 snippet.js一行一行從紀錄複製存檔後傳給別人
常見問題

JavaScript 執行器常見問題

我的程式會上傳到伺服器嗎？

不會。程式在你瀏覽器分頁內的沙箱 iframe 執行，不會傳到任何地方。

可以用 async/await 嗎？

可以。程式在執行前會包進 async 函數，所以頂層 await 能用。靜態 import 陳述式不支援。

為什麼 localStorage 在沙箱裡會拋錯？

iframe 刻意使用不透明來源，所以儲存空間與同源 API 都被封鎖。這正是讓程式碰不到本站資料的機制。

怎麼停止無限循環？

按「停止」。它會丟棄目前的 iframe 並載入新的，藉此終止舊框架還在跑的內容。

console.log 會顯示巢狀物件嗎？

會。物件與陣列會縮排序列化，循環參照會被標示，Error 也會印出堆疊。

程式可以改動我正在看的頁面嗎？

不行。DOM 變更只會出現在沙箱輸出框架。編輯器、主控台與這個頁面的其餘部分都是各自獨立的文件。

支援 TypeScript 或 JSX 嗎？

不支援，這個執行器只跑純 JavaScript。需要型別檢查時請用 TypeScript playground，處理資料則用 JSON 工具。

全部工具