Docs - v1.4.0

Table of Contents

  1. Introduction
  2. User Interface
  3. Developer Panels
    1. JavaScript Console
    2. Elements Panel
    3. Design Panel
    4. Source Panel
    5. Settings Panel
  4. FAQ
  5. Troubleshooting

Introduction

Inspect UI

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 is a web browser for iOS that ships with developer tools similar tools to those found on desktop browsers. The iOS version of many popular desktop browsers do not include essential developer tools like a JavaScript console or web inspector, so Inspect seeks to fill this need.

User Interface

Inspect resembles a desktop web browser in many ways, and tries to be familiar to developers that are used to desktop development tools.

Inspect UI

  1. Web View

    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.

  2. Navigation Controls

    These are standard browser controls. Refresh, back, and forward buttons, in the order displayed.

  3. Address Bar

    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.

  4. Developer Panel

    This area displays the active developer panel.

  5. Developer Panel Buttons

    These buttons allow you to select the developer panel to display.

  6. Show/Hide Developer Panel Button

    This button will show/hide the developer panel area.

  7. Screenshot Button

    This button will take a screenshot of the web view and save it to your photos.

Developer Panels

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.

JavaScript Console

JavaScript Console Developer Panel

The JavaScript console panel provides a console for logged messages, displays errors, and accepts input.

Tap the bar at the bottom of the panel (next to “>”) to input Javascript. You can wrap commands in “console.log()” to output the result to the logs displayed above.

Elements Panel

JavaScript Console Developer Panel

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.

Design Panel

Design Developer Panel

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.

Source Panel

Source Developer Panel

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.

Settings Panel

Settings Developer Panel

The settings panel allows you to change the way the web view operates.

JavaScript enabled

This setting allows you to enable or disable JavaScript support. Turning off JavaScript can allow you to debug fallback scenarios for users without JavaScript.

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.

FAQ

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 support@pdyn.net

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 support@pdyn.net. 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 support@pdyn.net.

Troubleshooting

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 support@pdyn.net. 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!