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-width
So 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