Inspect the web inside an app with DevTools

Why: many apps show part of their screens as web pages. When something breaks there, DevTools shows which request failed and which error the page threw, so the bug report says what went wrong, not just “it doesn’t work”.

What happens

1. The DevTools tab sits next to the phone. These are Chrome’s developer tools, connected to the app’s WebView: the built-in browser engine that shows web pages inside apps.
2. Network lists every request the page makes. A red line failed; click it to read the headers and the response.
3. Console shows the page’s messages and errors with the file and line they came from.
4. Elements shows the HTML and styles, for layout bugs.
5. Keep using the phone: everything new appears as it happens.

Good to know

• Holtdroid turns WebView debugging on when the app starts. The APK is not changed or rebuilt.
• The bar above DevTools shows the page’s address. Type another address and press Enter to open it in the WebView; the button on the left reloads the page.
• When the app has several web pages or processes, pick one in the target list next to the address.
• An iframe (a page inside a page) is not a separate target: open Console and choose it in the top ▾ menu at the console’s top left.

If it doesn’t work

• DevTools stays empty, “Waiting for a WebView…”: the screen the app shows right now has no web content. Open the part of the app that does.
• On a real phone DevTools is empty: on a phone without root only debuggable (development) builds expose their WebViews. Ask for a debug build or use a virtual device.
• The app closes right after the start: some apps refuse to run on rooted or emulated devices. Try a real phone.

More details: WebView DevTools.