Elements: inspect and edit live
The page’s live DOM tree with computed styles, inheritance and the box model. Change a value and the device re-renders on the spot — the fastest way to pin down a mobile layout bug.
Debug the web pages on your phone, from your computer
Just like pressing F12 on your own browser — remote debug pages on real iOS and Android devices: browser tabs, or the WebView / H5 embedded inside an app. Inspect elements, console errors, source breakpoints, network requests, cookies and local storage.
- Capture in-app WebView traffic
- Capture browser traffic
- Device screen beside the panels
- No app rebuild
Mobile web debugging, without the usual detour
Everything below is a normal day of debugging a page on a phone. The left column is how it usually goes.
| What you’re trying to do | The usual way | With the Web Inspector |
|---|---|---|
| The layout only breaks on the phone | Guess the fix, rebuild, redeploy, look again | Edit the element and its CSS live and watch the device update instantly |
| The page is blank or a button does nothing | No console on a phone, so you add alerts and logs | Console errors and logs exactly as the page threw them |
| Find which line of JavaScript fired a request | A capture tool shows the request, never the caller | Breakpoints and step-through in Sources, with live variables |
| See what’s really in cookies and localStorage | Guess from request headers | Full tables — name, value, domain, expiry, Secure, HttpOnly, SameSite — editable |
| Debug an H5 page embedded inside an app | Buried in traffic with no way to attach to it | Listed under the app that owns it; pick it and debug it like any page |
| Just getting remote debugging to work at all | Per-platform flags, hidden entry points, fiddly steps | One dialog: pick the device, pick the page, click Inspect |
| Read the traffic and the page state together | A capture tool and a debugger, side by side, unrelated | Both in one tool: the decrypted request, and the code that sent it |
Real developer tools, pointed at the device
Not a stripped-down viewer — the same panels you use on the desktop, attached to the page running on the phone.
Console: errors and a live REPL
Every error and log the page produced, plus a prompt that runs your JavaScript inside that page on that device. No more debugging by alert().
Sources: breakpoints & step-through
Browse the scripts and stylesheets the page loaded, set breakpoints, step through the call stack and inspect variables at the moment things go wrong.
Network: every request, in a waterfall
Status, type, initiator, size, timing and cache state for each request, with totals for requests, bytes transferred, DOMContentLoaded and full load time.
Storage: cookies, local & session
Cookies grouped by domain with expiry, Secure, HttpOnly and SameSite, next to localStorage and sessionStorage — the fastest way to unpick a login-state bug.
The device screen, on your screen
For Android, the live page is mirrored beside the panels and you can click and scroll it with the mouse — inspect and operate on one screen instead of juggling phone and keyboard.
What it looks like
Real sessions against a real phone — nothing staged.
What you can debug
Phones, tablets, emulators and simulators, plus a browser on your own machine.
| This computer | iOS | Android | |
|---|---|---|---|
| Browser tabs | ✓ | ✓ | ✓ |
| Pages inside apps (WebView / WKWebView / H5) | ✓ | ✓ | ✓ |
| Emulator / simulator | — | ✓ | ✓ |
| Inspect and edit elements & styles live | ✓ | ✓ | ✓ |
| Console, breakpoints and step-through | ✓ | ✓ | ✓ |
| Network waterfall for the page | ✓ | ✓ | ✓ |
| Cookies / localStorage / sessionStorage | ✓ | ✓ | ✓ |
| Live device screen beside the panels | — | — | ✓ |
| No certificate and no proxy to set up | ✓ | ✓ | ✓ |
One-time setup, before you start
The three blocks below are alternatives — do the one that matches your target, and only once.
iOS device
Plug in the cable and keep the device unlocked. For Safari turn on Settings → Safari → Advanced → Web Inspector; for Chrome, Chrome Settings → Content Settings → Web Inspector.
Android device
Plug in the cable and enable USB debugging in Developer options. Emulators are usually picked up without a cable.
Browser on this computer
Start Chrome or Edge with --remote-debugging-port=9222, then hit Refresh in the page list.
Debugging a page inside an app? One more thing
Skip this if browser tabs are all you need. Your own app: on Android call setWebContentsDebuggingEnabled(true) once; on iOS 16.4+ set isInspectable = true on the WKWebView. Someone else’s app, or no code change: tick “Also include pages inside apps” and the pages in currently-open apps are listed too — needs a rooted Android device, and on iOS works with dev-signed apps only.
With that done, every session is just this
New capture → target (This computer / iOS / Android) → method “Web inspector” → Refresh → pick the page → Inspect. Full developer tools open in your browser; open as many as you like, they run side by side.
The pages hidden inside apps, too
Most apps are part native, part web. Those embedded H5 pages are where the awkward bugs live — and where ordinary tooling gives you nothing.
Grouped by the app that owns them
The page list is organised per app, so you can tell an in-app checkout page from a browser tab at a glance and attach to exactly the one you mean.
One checkbox
“Also include pages inside apps” adds the pages running inside currently-open apps to the list. Untick it and you’re back to browser tabs only.
Nothing left behind
You don’t rebuild the app, sign anything, or install a helper on the device. When the session ends, the device goes back to how it was.
Pairs with packet capture
Debug the page here, and capture the same app’s traffic in the same tool — decrypted HTTPS, including apps that pin certificates or ignore the system proxy.
Mobile web debugging: common questions
How do I inspect an element on a phone?
Connect the phone to your computer over USB, open Trace Eagle, choose New capture → iOS or Android → method “Web inspector”, pick the page and click Inspect. A full Elements panel opens on your desktop showing the live DOM and CSS of the page on the device; editing a value there changes the page on the phone immediately.
Can I debug an Android WebView without modifying the app?
Yes. WebViews that already allow debugging are listed straight away. For apps that don’t expose them, tick “Also include pages inside apps” and the pages running inside currently-open apps are added to the list — this needs a rooted device, and nothing is rebuilt, repackaged or permanently installed.
How do I debug a web page on an iPhone or iPad?
Plug the device in, unlock it and turn on Settings → Safari → Advanced → Web Inspector (or Chrome Settings → Content Settings → Web Inspector). Then pick the device and page in Trace Eagle and click Inspect — the full Web Inspector opens in your desktop browser, with Elements, Console, Sources, Network, Storage, Layers and more.
Is this the same as chrome://inspect?
It covers the same job and more, in one dialog. Chrome’s remote-debugging page only handles Chromium targets on Android; here iOS, Android and your local browser all live in the same picker, pages are grouped by app, in-app H5 pages can be added with a checkbox, and the whole thing sits next to a packet-capture tool that decrypts the same app’s HTTPS traffic.
Do I need a jailbreak, or to root the phone?
No, not for ordinary debugging: browser tabs and apps that already allow it work on a stock device. Only the extra option that adds pages inside third-party apps needs a rooted Android device, and on iOS the system limits which apps can be included.
Does it need a certificate, a proxy, or an SDK in the app?
None of the three. Remote web debugging runs over the USB connection, so there’s no proxy to configure, no root certificate to install on the device, and no SDK or library to add to the app.
How is this different from packet capture?
Packet capture answers “what went over the network” — the request, the response, headers and body, decrypted. The web inspector answers “what did the page do” — the DOM, the styles, console errors, which script fired the request, and what was already in cookies and storage before it did. Trace Eagle ships both, so you can move between them without switching tools.
Which browser do I use for the debugging window?
Android and local-browser sessions open in Chrome, Edge or Brave (Trace Eagle launches one for you); iOS sessions work in any browser.
Does it work with emulators and simulators?
Yes. Android emulators are usually detected without any cable, and iOS simulators running on the machine are picked up too — the flow is identical to a physical device.
Is the Web Inspector free?
Yes. Like everything else in Trace Eagle it’s completely free, on macOS, Windows and Linux, with no feature paywall.