Table of Contents
- User Interface
- Developer Panels
Inspect is a fully featured web inspector that seeks to give web developers the tools they need to develop for the web using only an iPad or iPhone.
Inspect resembles a desktop web browser in many ways, and tries to be familiar to developers that are used to desktop development tools.
This area displays the current web page. By default it takes up this entire area, but may shrink when viewing the page using different device previews.
These are standard browser controls. Refresh, back, and forward buttons, in the order displayed.
The address bar displays the current web address. Tapping it will allow you to enter your own address. The “http://” or “https://” part of the address will be displayed if relevant, but you do not have to include it when entering your own address.
The number on the right of the address bar (0.03s in the image) is the amount of time taken to load the page.
This area displays the active developer panel.
Developer Panel Buttons
These buttons allow you to select the developer panel to display.
Show/Hide Developer Panel Button
This button will show/hide the developer panel area.
This button will take a screenshot of the web view and save it to your photos.
Most of Inspect’s core functionality is contained within it’s developer panels. Each of these panels provides a certain type of tool to help you work with the currently loaded web page.
The Elements panel provides a view of the current page’s HTML source code. The code is formatted by HTML elements, and uses basic syntax highlighting to make the code easier to read.
Tapping each element will outline the element in the web view, and display a sub panel below the list of elements that provides additional tools that apply to that element. Swiping an element to the left will give you an option to remove the element from the page.
The design panel allows you to preview the current page in number of different resolutions. This allows you to see how the page will look on desktop or other mobile devices.
The list at the top of the panel shows the currently available device presets. The number below the name of each preset shows the size of the preset. These numbers are CSS dimensions and can be used to target the device using CSS media queries. They do not necessarily match the real pixel dimensions of the device.
Tapping each preset will resize the web view to this device. If the dimensions are larger than the available space, the web view will be scaled down to show an aproximation of the page at that resolution.
The source panel provides raw source code from the page. This is not formatted or manipulated in any way. This can be useful for inspecting the raw source code or copying large sections of code. This code is not editable and changes will not have any effect on the displayed page.
The settings panel allows you to change the way the web view operates.
Allow 3rd Party Embedded Content
Switching this setting off will block embedded content from 3rd party domains. This can help you test how your page will act under certain ad-blocking scenarios. Note that this is not intended as a full ad-blocker and some 3rd party content may still be loaded.
Validate SSL Certificates
Disabling this setting will bypass SSL certificate verification when loading the page. This is useful for local development environments using self-signed certificates or other trusted environments that don’t have consistent certificates.
Be careful when disabling this setting as it can be a security risk in untrusted environments.
Does this app work on iPhone as well?
Yes! This app is a universal app, which means the same app will work for both iPad and iPhone. There is no separate purchase or different version.
Are all features included with purchase?
Yes! All features are included with your app purchase. There are no restrictions or additional in-app purchases.
Will this app work on any website?
It should! There are no restrictions needed for the app to work on a particular page, or additional code needed. If you discover a problem loading your page, please email firstname.lastname@example.org
I’m having trouble doing something, or I think I found a bug. What do I do?
Check out the troubleshooting section first, and if your problem continues, please email email@example.com. Please include the device/OS you are using, a screenshot of the problem if possible, and as many details as possible to help reproduce the problem.
Can you add X feature?
Probably! Comments and suggestions are always welcome, so please send any to firstname.lastname@example.org.
If you run into trouble or the app is not functioning as you think it should, there are a few things you can do to help resolve the problem.
First, always make sure you are up to date. Check for an update in the App Store, and if available, update to the latest version. Quirks and bugs are fixed all the time, so if you encounter something on an older version of the app, it might be fixed already.
If the issue persists, please send an email to email@example.com. Please include as much detail as possible about the problem that occurred and what led up to it. If possible, include a screenshot in your email showing the problem, as well as the web address the where it occurred. Please also include the device you are using, and the OS you are on. Thanks!