HTML Inspector

MIHTool helps Front-End Engineers to debug and optimize their webpages on iPad and iPhone

1.Action Extension for Safari, brings remote Web Inspector to debug your webpages in Safari. A Inline Web Inspector that is a real Chrome like DevTool for iOS Safari.

MIHToo Action Extension for Safari is the first App that brings a real Chrome like Inline DevTool for iOS Safari. Now, you can inspector your web pages in iOS Safari and Safari View Controller right on your iPad and iPhone without a desktop computer. You can also remote Web Inspector to debug your webpages in Safari and Safari View Controller.
To open MIHToo Action Extension, just click the Share Button of Safari and select MIHTool, for the first time, you might have to enable it in the more list.
Just like Chrome DevTools, it has Elements,Resources,Network,Timeline and Console panel. And it totaly optimized for touch screen. You can maximize and minimize.
Note: If you can't see any logs in Network or Timeline panel, be sure the record circle switcher is RED.
Web inspector is based on weinre,bug reports please check weinre google group.
MIHTool's weinre server is might not cover your location, which is mean you might have network issue with Web Inspector in Action Extension. But if you open your web page in MIHTool, and switch to another weinre server for the one in App, you can do this with MIHTool Remote control(With HTTP Server).
Web pages that enable Content Security Policy will break Web Inspector.

2.Inline Web inspector(like Chrome DevTool or FireBug):With Elements,Resources,Network,Timeline,Console panel.

Inline Web inspector is an iPad only feature.Which makes you possible to inspector your webpages right on your iPad without a desktop computer.
Just like Chrome DevTools,it has Elements,Resources,Network,Timeline and Console panel.And it totaly optimized for touch screen. You can maximize,minimize,zoom-in and zoom-out.
Note: If you can't see any logs in Network or Timeline panel,be sure the record circle switcher is RED.
Please check this video to see how it works.
Web inspector is based on weinre,bug reports please check weinre google group.
MIHTool's weinre server is might not cover your location, which is mean you might have network issue with Web Inspector. But this can be solve by switch to another weinre server, you can do this with MIHTool Remote control(With HTTP Server).
Web pages that enable Content Security Policy will break Web Inspector.

3.Web inspector remote(weinre):remote to debug and optimize your mobile webpages on your computer(window,mac,linux with chrome).

Web inspector remote makes you possible to inspector your webpages with any remote computer(window,mac,linux,or another iPad) in the same local network.
Just like Chrome DevTools,it has Elements,Resources,Network,Timeline and Console panel.
Note: If you can't see any logs in Network or Timeline panel,be sure the record circle switcher is RED.
Web inspector is based on weinre,bug reports please check weinre google group.
MIHTool's weinre server is might not cover your location, which is mean you might have network issue with Web Inspector. But this can be solve by switch to another weinre server, you can do this with MIHTool Remote control(With HTTP Server).
Web pages that enable Content Security Policy will break Web Inspector.

4.Online Web Inspector.

Online web inspector just works as web inspector remote.But is allows you to inspector your webpages with any online remote computer even they are not in the same local network.
Some time your devices are in the local network but may not be accessed by each other,so web inspector remote won't work for you,but if your devices can access external network,online web inspector will work just fine.

Web Inspector is your command center, giving you quick and easy access to the richest set of development tools ever included in a web browser. It helps you inspect all of the resources and activity on a webpage, making development more efficient across macOS, iOS and tvOS. Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. Overview Get started with Google Chrome's built-in web developer tools. So it's real block element without any HTML, but on inspection he only selects the related LI element. The 'force element state'-option does not work either, it's only for interaction states like:hover but not:before. Html css google-chrome inspector. Improve this question.

5.HTML editor:view webpage source code with syntax highlighting and formatting;editing source code or creare a new webpage and preview the result.

HTML editor is an iPad only feature.Which makes you possible to view and edit any webpages source code with syntax highlighting right on your iPad.
Sure you can create a new webpage with HTML editor and view the result,you also can format source codes or just share them with your friends.
It totaly optimized for touch screen.And you can remote control to export current webpage's source code.

6.Remote control(With HTTP Server):Remote to,Load URL in MIHTool Safari;Inject Javascript in current webpage;Clear website data;Get HAR data;Get source code;Get screenshots…

Turn ON MIHTool's HTTP Server you will get a HTTP link like http://192.168.1.101:1630,this link allows you to be able to remote control MIHTool from any remote computer(window,mac,linux,or another iPad) in the same local network.
Open the HTTP link from a remote computer,you will see many commands are available for you.
Almost each feature of MIHTool can be remote control with it's command,such as Load URL in MIHTool Safari;Web Inspector;Inject Javascript in current webpage;View history;Clear website data;Get HAR data;Get source code;Get screenshots,and so on.
All remote commands are REST like so you can write some auto-run scripts to automatically test your wepages.This is very conveniently for you to control multi devices form a single computer at the same time.

7.Show WebKit Debug Borders(Compositing Render Layers).

Show WebKit Debug Borders(Compositing Render Layers) and Show Webkit Repaint Counter(Paint Rects) is a way for you to optimize your web apps and make them 60FPS performance.
To learn how to optimize web apps please check

Html Inspector

8.Show Webkit Repaint Counter(Paint Rects).

9.Emulate iPhone.

Emulate iPhone is an iPad only feature.Which makes you possible to see how your webpages look like on iPhone without an iPhone.

Html Code Inspector

10.User agent switcher.

User agent switcher is an iPad only feature.Which makes you possible to switch other platform's broswer user agent,such as android,pc,and mac.

11.More developer bookmarklets:Firebug,YSlow,PageSpeed,GTmetrix…

12.Evaluating JavaScript in the address bar.

13.Full screen mode(Shake Device To Toggle Full Screen Mode).

14.Disable cache.

15.Clear history,clear cache,clear cookies, clear local storage.

16.Keep awake(Default is ON).

17.HAR Viewer (network traffic).

With HAR Viewer you can see your all of webpages network traffic waterfall, you'll never miss any request's log, it's better then the network panel within the Web Inspector.
You can use HAR Viewer in the iPad version, the remote HAR Viewer is available for both iPad and iPhone.
You can also use remote control to export HAR data and view in Online HAR Viewer(Be sure the 'Validate data before processing?' box is un-checked .)

18.Performance API.

An implements of Performance API
The Performance interface represents timing related performance information for the given page.

19.Polyfill Manager(simulate APIs for javaScript to Objective-C communication,demo)

You might build webpages for hybird apps,and your webpages need to communicate to the native app.You can use Polyfill Manager to simulate native app's APIs,so you can debug you webpages before the native app finished,even the native app has not been installed on your device.
Please check this video to see how it works.

20.NPM Modules (To require() any module on npm in web inspector console with browserify)

Html Inspector Website

To require() any module on npm in web inspector console with browserify
Browsers don't have the require method defined, but Node.js does. With Browserify you can write code that uses require in the same way that you would use it in Node.
This feature makes MIHTool more powerful and easier for you to debug and optimize your webpages.