Suger DevTool – Mobile DevTools

On-device Mobile DevTools with Live HTML, CSS Editing & Advanced JavaScript Debugging

PLAYGROUND

HD previews

Mobile Preview

---

---

---

---

---

---

---

---

---

---

---

---

Tablet Preview

---

---

---

Suger DevTool is a standalone, high-performance mobile-first DevTools designed to bring a desktop-like debugging experience directly to mobile devices.

It focuses on deep inspection and live editing, not just console logging.

Suger DevTool works entirely on-device, without requiring a desktop computer, USB connection, or remote DevTools setup.

It is optimized for:

• Mobile Browsers
• Acode
• WebView-based applications
• Shadow Dom

Most mobile debugging tools focus on basic logging and network inspection.

Suger DevTool is built for developers who need real control and visibility on mobile devices.

• Live HTML tree editing with instant visual feedback
• Full CSS rule editing with integrated color picker
• Computed style inspection and box model view
• Advanced JavaScript debugging with async/await stepping
• Pause JavaScript execution and DOM updates to inspect state
• No desktop, no USB, no remote debugging required

• Mobile-first web developers
• WebView / Hybrid app developers
• Acode users
• QA testers debugging on real devices
• Developers without reliable access to desktop DevTools

A fully interactive JavaScript debugger designed for mobile environments.

• Async Support — Step through asynchronous code, Promises, event listeners, and timers
• Breakpoints — Set breakpoints in inline scripts and external JavaScript files
• Scope Analysis — Inspect local, closure, block, and global variables in real time
• Watch Expressions — Track expressions and variables as execution progresses
• Execution Control — Pause and resume JavaScript execution safely

View Responsiveness through device view

• Device View — Device view with many pre exist device & custom

Inspect and modify the DOM directly on your mobile device.

• DOM Tree — Fully interactive DOM tree with expand/collapse
• Live Edit — Edit tags, attributes, and text content in real time
• Computed Styles — Inspect resolved CSS values and box model
• Layout Tools — Grid and Flexbox visualization overlays
• Style Change Tracker — Track, preview, diff, and copy CSS modifications in real time

Analyze network activity directly on-device.

• Waterfall Chart — Visual request timing (DNS, SSL, TTFB, Download)
• Interception — Inspect request headers, payloads, and responses
• XHR Breakpoints — Pause execution on specific network requests

Inspect application-level storage and resources.

• Storage — LocalStorage, SessionStorage, and Cookies viewer
• Deep Inspect — IndexedDB and Cache Storage explorer
• Service Workers — Inspect and unregister service workers

Real-time tracking of system resources and rendering performance.

• Resource Graphs — Visual timeline for CPU usage, JS Heap, and FPS
• DOM Stats — Monitor DOM node counts and active event listeners

Different tools are built for different needs.

You can use Suger DevTool in any HTML/JavaScript project.

Required for advanced debugging features such as network interception and source debugging.

• File name: devtool-sw.js
• Location: Project root (same directory as index.html)

⚠️ Make sure the service worker file is accessible from the root scope.

Download or serve the engine locally:

• File: suger-dev.js

Add before </body>:

<script src="dt/suger-dev.js"></script>

suger CDN link - 1.x.xv

<script src="https://suger-cdn.vercel.app/suger-dev.js"></script>

File structure:

Your_Project/
├── dt/
│   └── suger-dev.js
├── devtool-sw.js
└── index.html

Serve suger-dev.js from localhost and save this as a bookmark URL:

javascript:(function(){
  var script = document.createElement('script');
  script.src = 'http://localhost:8080/dt/suger-dev.js';
  document.body.appendChild(script);
})();

Serve suger-dev.js via CDN and save this as a bookmark URL:

javascript:(function(){
  var script = document.createElement('script');
  script.src = 'https://suger-cdn.vercel.app/suger-dev.js';
  document.body.appendChild(script);
})();

Free Trial (Beta) Key

CRST-FREE-GIFT-SUGR

Open almost any website and run the saved bookmark.

Note: Suger DevTool is premium software.

• License is bound to a single device for fair usage
• Offline usage supported After using product key
• Designed for debugging and development purposes

• Free Trial: free trial
• Lifetime License: One-time purchase at a minimal price

• Native browser rendering and layout pipeline cannot be paused
• Media playback and some CSS animations may continue while paused
• Not intended for production runtime usage

• Website: https://suger-devtool.vercel.app
• Telegram: @cosmodec