Ruststudio 0.1.5: a debugger for JavaScript, TypeScript and WebAssembly, plus rename and quick fixes

Ruststudio is a free IDE for Rust that is itself written in Rust. Version 0.1.5 is the biggest release so far. Most Rust projects that ship something users see have a front end next to the Rust, so the headline is a debugger for the JavaScript and TypeScript half. The rest is the editing and navigation work that was missing for daily use.

(Version 0.1.4 was built but never released, so everything below is new compared with 0.1.3.)

1. A debugger for JavaScript, TypeScript and WebAssembly

Press F5 on a script and it runs under Node.js with the debugger attached. Press F5 on a web page, or in a front-end project (Vite, React, Vue, Svelte, Angular, Next and the like), and your app opens in Chrome or Edge with the debugger attached. It is the same Debug panel the Rust debugger uses: call stack, variables, watches, hover values, step over/into/out, run to cursor, break all, and the Immediate window, which here takes JavaScript.

What I tried to get right:

• Breakpoints go in your own files. Set them in the .ts, .tsx or .vue source. Source maps, inline or separate files, take the debugger to the right line, and the stack and the yellow line show your source, not the generated code.
• It starts your dev server. For an app you give its address once (it is remembered). If nothing answers there and package.json has a dev or start script, Ruststudio runs npm run dev for you and stops it when the session ends. The server's output appears in the Output panel next to the page's console.log.
• Your browser stays yours. The debugged page runs in a separate, temporary browser profile, so your tabs and logins are untouched.
• Pauses where you expect: on breakpoints, on debugger; statements and on uncaught exceptions, with the error message. Code in node_modules and Node's own modules is skipped when stepping.
• Values read like the browser console: {a: 1, s: "x"}, Array(3) [1, 2, 3], Map(1) {k => v}.
• WebAssembly: a module is a script like any other. Stop in the JavaScript that calls it and step in: the stack shows the WebAssembly function above its JavaScript caller. If the module has a source map, frames show the original file.
• TypeScript under Node runs through tsx or ts-node when your project has one, otherwise through Node's own type stripping (Node 22.6 or newer).

How it works, for the curious: there is no extra download. Ruststudio talks to the browser's (and Node's) inspector over a WebSocket, using a small client written for this, and translates to the Debug Adapter Protocol that the Rust debugger already used. That is why the whole existing debugger UI worked unchanged.

What it does not do yet: line-by-line debugging of Rust compiled to WebAssembly needs DWARF debug-info support in the debugger, which is not there. Only the main page is debugged (not web workers or other tabs). I tested it against Node 22 and headless Chrome on Windows, with TypeScript compiled with a source map, a module required late, an uncaught error, a WebAssembly call, and a page served by a dev server. Edge, Linux and macOS are untested.

Two new commands choose the way explicitly: Debug > Debug Web App in Browser and Debug > Debug Script with Node.js.

2. Rename, Quick Fix and more navigation

These use rust-analyzer, so open a Cargo project.

• Rename Symbol (F2) changes a name everywhere it is used, in every file, and tells you how many places changed.
• Quick Fix (Ctrl+.) lists the fixes and refactorings rust-analyzer offers at the cursor. (A real-server test caught that the editor had to declare this ability before rust-analyzer would offer anything.)
• Go to Implementation (Ctrl+F12) and Go to Type Definition join Go to Definition.
• Peek Definition (Alt+F12) shows a definition in a small card under the editor; Find All References (Shift+F12) lists every use, filterable by typing.
• Expand Macro shows what the macro at the cursor turns into, in the Output panel.

3. Editing commands

All in the Edit menu and the Command Palette (Ctrl+Shift+P): Join Lines, Sort Lines Ascending/Descending, Remove Duplicate Lines, Reverse Lines, Trim Trailing Whitespace, Insert Line Above/Below, Copy Line Down, Delete to End of Line, Transpose Characters, Convert Tabs to Spaces, Surround with Quotes or Parentheses, Toggle Block Comment, Go to Matching Bracket, and Transform to UPPERCASE, lowercase, snake_case, camelCase or PascalCase. Each one is a single undo step. Plus tab commands: Close Other Editors, Close All Editors, Copy File Path, Open Cargo.toml, and Reopen Closed Editor.

4. Cargo from the Run menu

Add Dependency (type serde or tokio@1; input that looks like an option is refused), Update Dependencies, Apply Compiler Fixes (cargo fix), Apply Clippy Fixes, Show Dependency Tree, and Run Benchmarks.

5. Smaller changes

• Run and Debug are separate. Debug always debugs and never quietly turns into a plain run; if the debugger is missing it says so. The status bar says "Running (no debugger)" for a Run.
• Tasks show their cost. While cargo run, tests or a build is going, the status bar shows CPU share, memory and thread count for the task and everything it started.
• Account icon shows your name and e-mail when you are signed in; signed out, clicking it opens sign-in / sign-up.
• Update notice inside the app when a newer version exists.
• Usage sharing is off until you say yes. One small card asks once. If you agree, a weekly summary goes out (how long and how often you use it, which features, what kind of project). Never names, paths, code or errors. Change it any time in Help > Usage Sharing.
• A rating card now and then: never in your first week, at most every 45 days, five stars, no typing.
• Linux package now builds against glibc 2.28, so the .deb installs on older distributions.

Try it

Ruststudio is free: ruststudio.org. If you debug a front end with it and something does not stop where it should, tell me what framework and bundler you use. That is the most useful bug report for this release.