Skip to content

v1.0.12 (beta) : Professional Mobile DevTools: Deep Inspection, Debugger & Performance Monitor

Choose a tag to compare

@Sou6900 Sou6900 released this 27 Dec 06:43
· 73 commits to main since this release
8322fa2

🎉 Initial Stable Release v1.0.12

This release introduces a fully-featured, mobile-first Developer Tool suite designed for debugging web applications directly on mobile devices or touch environments. It includes advanced capabilities like Shadow DOM inspection, a full-featured source debugger, and real-time performance monitoring.

⭐ Key Features

□ Elements Inspector (Pro)

  • Advanced DOM Tree: Fully interactive DOM tree with expand/collapse logic.
  • Shadow DOM Support: Deep inspection capability for #shadow-root (open/closed) and its child elements.
  • Style Change Tracker: Track, diff, and manage all CSS modifications made during the session.
  • Deep Selection: Inspect elements deeply nested within Shadow DOMs using the "Inspect" pointer.
  • Live Editing: Double-tap to edit tags, attributes, and text nodes directly.
  • Computed Styles & Layout: Visualize Box Model, Grid, and Flexbox layouts.

□ Device Emulation

  • Responsive View: Test layouts on various device presets (iPhone, Pixel, iPad).
  • Live Sync: Changes in the main window (DOM/CSS) automatically sync to the device frame.
  • Gestures: Supports touch, pinch-to-zoom, and pan interactions.

□ Intelligent Console

  • Rich Object Viewer: Interactive JSON formatter for deep object exploration.
  • Error Stack Parsing: Clickable source links (e.g., app.js:10:5) that open the Source tab at the exact line.
  • Smart Autocomplete: Suggests global variables and snippets while typing.
  • Syntax Highlighting: Beautifully formatted logs, errors, and warnings.

□ Source Debugger

  • Full Breakpoint Support: Set breakpoints in inline scripts and external files.
  • Control Flow: Resume, Step Over, Step Into, and Step Out controls.
  • Scope & Watch: Inspect local/global scopes and watch custom expressions.
  • Media Preview: Preview images, videos, and inspect HLS/DASH streams directly.

□ Performance Monitor

  • Real-time Graphs: Visual timeline for CPU usage, JS Heap size, and FPS.
  • DOM Stats: Track live DOM node counts and event listeners to detect leaks.
  • Control: Toggle monitoring on/off to save resources when not in use.

□ Network & Application

  • Network Inspector: View XHR/Fetch requests with header and payload details.
  • XHR Breakpoints: Pause execution on specific URL patterns.
  • Storage Manager: View and edit LocalStorage, SessionStorage, and Cookies.

□ Improvements & Fixes in v1.0.12

  • Fixed: ReferenceError handling in Console now displays correct stack traces.
  • Fixed: Elements Tree now correctly auto-expands and scrolls to the selected element (even inside Shadow DOM).
  • Fixed: Monitor tab now stops background processing when inactive to save battery.
  • UI/UX: Improved dark theme consistency and touch interactions.

Built for developers, by developers.