Perfect solution for iOS browser development and debugging in Safari

In the increasingly modern Web network, the percentage of users of various modern browsers and mobile terminal devices is getting higher and higher. For our Web Front-end developers, Apple mobile devices running iOS Safari cannot be ignored. However, when we need to test and debug the front-end page, the performance of Safari on the desktop is not exactly the same as that of Safari on the mobile version (mainly becausedevice-widthSo we can only test and debug Safari on iOS devices.

This article describes how to debug Safari browser on iOS devices provided by Apple. I used mobile Safari running on iOS 6.0.1 and Safari running on OS X Mountain Lion ). Theoretically, the mobile Safari browser can be used on iPhone, iTouch, iPad, and other Apple mobile devices.

Enable the feature in settings

[IOS terminal]: settings → Safari → advanced → Web checker → open. ()

[OS X]: Safari → preference settings → advanced → the "Development" menu is displayed on the menu bar. ()

Connect the mobile device to the computer and enable the debugger

After Safari is started in OS X, the iOS device is normally connected with a USB cable and Safari is started on this mobile device. Click "development" in the Safari menu on the computer to view the names of iOS devices. Its Sub-menu items are all tabs of Safari on mobile devices. Click any one to start debugging. ()

In this debugger, we can perform various debugging tasks like using the Safari debugger of the desktop operating system, such as viewing and instant editing of HTML elements, CSS and box models, JavaScript debugger, webpage element timeline, DOM element viewer, and other functions. ()

HTML structure and corresponding CSS

IPhone screen

HTML structure and corresponding CSS instant editing

IPhone screen

JavaScript instant debugging

IPhone screen

Network request timeline