Official Quick Start & User Manual

Mastering On-Device Mobile Web Inspection

Learn how to inspect DOM elements, edit CSS in real time, execute JavaScript in the REPL console, and monitor network waterfall requests directly on your Android phone without a PC or ADB.

Tap & Trace Android App On-Device Web Inspector Interface
Android v1.0.0 Interface Live on-device dual viewport: Top Web View + Bottom Resizable DevTools Inspector Dock
Step-by-Step Instructions

9 Quick Steps to Debug Like a Pro

Everything you need to know from launching your first URL to exporting network request cURL commands.

1

Enter Any URL or Localhost IP

Type any web address in the top URL bar (e.g. https://example.com) or connect to local dev servers on your Wi-Fi (e.g. http://192.168.1.50:3000). Cleartext HTTP is fully supported.

💡 Tip: Tap the Tab Switcher icon to open and manage multiple concurrent browser tabs.
2

Open & Resize the DevTools Dock

Tap the DevTools </> button in the top toolbar to toggle the developer panel. Drag the horizontal handle bar to resize the split view anywhere from 20% to 80% screen height.

💡 Tip: Double-tap the handle to quickly toggle between 50% split view and full screen.
3

Tap-to-Inspect Any Element

Tap the Target / Crosshair icon to activate Touch Inspect mode. Touch any element on the webpage to see its live dimensions, CSS class badges, tag name, and auto-navigate to it in the DOM tree.

💡 Tip: Tap-to-Inspect highlights padding (green), margin (orange), and content (blue) box bounds.
4

Live Edit HTML & CSS Styles

In the Elements panel, tap on any HTML node to expand its child tags, or switch to the Styles sub-tab to edit colors, padding, display, and font sizes with immediate live visual feedback.

💡 Tip: You can add new CSS rules or toggle existing properties with instant recalculation.
5

Execute JavaScript in the REPL Console

Switch to the Console panel to view console.log(), warnings, and unhandled runtime exceptions. Type any JS command or expression into the prompt to run it against the active page context.

💡 Tip: Use quick chips for instant evaluation of location.href, document.title, or localStorage.
6

Analyze Network Waterfall & cURL Export

Open the Network panel to monitor real-time Fetch/XHR, CSS, JS, and image requests with latency timestamps. Tap any request to inspect headers, request payload, response body, and copy cURL scripts.

💡 Tip: Tap "Copy as cURL" to replicate the request with exact headers in Postman or terminal.
7

Manage Storage (Cookies & LocalStorage)

In the Storage panel, view and edit Key-Value pairs in localStorage, sessionStorage, and active session Cookies. Add, edit, or delete auth tokens and state values on the fly.

💡 Tip: Clear auth tokens instantly to test logout workflows without clearing app data.
8

Emulate Devices & Hardware Fingerprints

From the three-dot menu, select "Hardware Fingerprinting & UA" to emulate iPhone, iPad, Pixel, or Windows Desktop viewports and User-Agent strings to test responsive mobile rendering.

💡 Tip: Test responsive viewport breakpoints and mobile vs desktop stylesheets effortlessly.
9

Send Feedback Directly to Engineers

Found an edge case or want a Version 2 feature? Tap "Send Feedback" from the top menu or on this website. Our core developers read and iterate on all submissions directly.

💡 Tip: Feature requests dictate our bi-weekly release roadmap!

Ready to Start Debugging?

Enter any URL in your Tap & Trace address bar above to begin live DOM inspection, console debugging, and network profiling.

← Back to Home 💬 Send Feedback