Diagnostics while you type
A Worker parses your code after each pause and underlines syntax errors and a configurable set of ESLint-style rules: no-debugger, no-dupe-keys, no-unreachable, no-unused-vars, eqeqeq, no-empty, no-cond-assign and a few more. Rules can be switched off or raised to errors in Settings. It is an independent implementation of these rules, not ESLint itself.
A console that keeps file and line
Errors show the original file name and line number, and clicking them jumps to the code. console.table, console.group, console.time and console.count work the way you expect from browser devtools.
Long loops in a preview are stopped by a loop guard after two seconds, so a typo in a while condition does not freeze the tab.
How to use it
- Edit app.js and click Load notes in the preview.
- Open the Console tab to see the table output.
- Introduce == instead of === and watch the warning appear.
Questions
Can I import npm packages?
Only files in your project and the bundled React runtime can be imported. Arbitrary npm packages cannot be installed in an offline browser sandbox, and the editor tells you exactly which import failed.
Where does the code run?
Page scripts run in the sandboxed preview frame. Scripts without an HTML page run in a Web Worker inside a sandboxed frame that is terminated when you press Stop or the time limit is reached.
Does it work offline?
After the first visit the app shell is cached by a service worker, so editing, previewing and running JavaScript keep working without a connection.