Skip to content

README.md

Latest commit

 

History

History
74 lines (63 loc) · 3.03 KB

README.md

File metadata and controls

74 lines (63 loc) · 3.03 KB

DevDebug Studio

DevDebug Studio is a browser-based JavaScript step debugger that lets you run code, step through execution, set breakpoints (including conditional), inspect variables and the call stack, and watch expressions live.

DevDebug Studio

Project Structure

DevDebug-Studio/
├── index.html         # App markup
├── styles.css         # Layout, themes, and panel styling
├── script.js          # Debugger logic and UI behavior
├── README.md          # Project documentation
└── images/
    └── devdebugv2.png # README screenshot

Run

  1. Quick start: open index.html directly in a browser.
  2. Local server option:
    • From DevDebug-Studio/, run: 
      python3 -m http.server 8000
    • Open http://localhost:8000.
  3. Note: Acorn is loaded from a CDN, so internet access is required unless bundled locally.

How to Use

  1. Click Run to start execution, or use Step Over / Step Into for line-by-line control.
  2. Toggle breakpoints by clicking the gutter or line numbers.
  3. Use Alt/Meta + click on a breakpoint to create a conditional breakpoint.
  4. Use Continue to resume after breakpoints and Stop to reset execution.
  5. Add watch expressions in the Watches panel and edit variables by double-clicking values.
  6. Use Step Back or the timeline scrubber to inspect earlier execution states.
  7. Manage code tabs with +, close buttons, and Clear Code for the active tab.
  8. Toggle Light/Dark mode; preference is persisted locally.

How It Works

  • Parses JavaScript using Acorn to build an executable step list.
  • Advances execution one step at a time and updates highlighted lines.
  • Evaluates breakpoints and conditional breakpoint expressions.
  • Refreshes variables, call stack, watches, and console panels per step.
  • Stores code, tabs, breakpoints, watches, and theme in localStorage.
  • Supports timeline-based navigation across recorded execution snapshots.

Features

  • Run/step controls (Step Over, Step Into, Step Out, Step Back, Continue)
  • Breakpoints and conditional breakpoints
  • Timeline scrubber and state replay
  • Watches panel with live expression tracking
  • Editable variables panel
  • Example loader and custom example saving
  • Multi-tab editing with close/add actions
  • Clear Code action for active tab
  • Light/Dark mode with local persistence

Privacy

  • All code execution and analysis happens in the browser.
  • No backend upload is required by default.
  • Project state (tabs, watches, breakpoints, theme) is stored in localStorage.

Roadmap

  • Add optional local parser bundle to remove CDN requirement.
  • Improve execution fidelity for advanced JavaScript patterns.
  • Add import/export for debugger sessions.
  • Add keyboard shortcut help modal and command palette.
  • Expand automated UI regression coverage.

Detectable Languages

  • JavaScript

Notes

  • No build step is required for local use.
  • If external CDN resources are blocked, parser-dependent functionality may fail until dependencies are bundled locally.