New in Web Inspector: Updated Layout, Search HTML, and Network Responses
Web Inspector 1.2.1 is out! This is a big update.
Updated layout
I moved all the buttons to the top because hunting for the buttons when Safari’s toolbar keeps appearing and disappearing is annoying.
Also, I moved the Inspect toolbar from the Elements tab to the DOM tab. The new layout should make more sense if you’re used to Web Inspector on the desktop: view the DOM elements in DOM, then switch over to Elements to see its properties and CSS styles.
Also, also: I removed a few redundant (read: useless) buttons.
Also, also, also: on non-mobile-optimized web pages, Web Inspector will scale its UI up so it won’t appear comically small on the iPhone.
Highlight and select
Now that the Inspect toolbar is in a more prominent location, perhaps I should talk about them since many people have never noticed them before.
The Highlight button (second from the left, looks like an eye) toggles the highlighting of the selected DOM element. On desktop, you get the highlight by hovering over DOM elements, but we can’t do that on mobile, so yeah, a button.
The Select button (first from the left, looks like a mouse cursor and a square) is a classic Web Inspector tool. Tap on it to start selecting any items on the web page, and see it in the DOM tree. Web Inspector will temporarily hide the panel while you’re doing this. This button triggers highlight mode. Remember to turn this off if you want to interact with items on the web page again.
The Edit button (third from the left, looks like a pencil) lets you edit the selected DOM element.
Search the HTML
The Search button on the right lets you search the HTML. You can cycle through the search results, and Web Inspector will try to move them (both the item and its representation in the DOM tree) into view. This button triggers highlight mode.
Formatted network responses
There’s a new View Response button on the details page of a network request. You can tap the button to see the prettified, syntax-highlighted network response. It works for HTML/CSS/JS, other text files, and images.
Check it out
Web Inspector is free, with no in-app purchases, no ads, and no tracking. Get it in the App Store today.