Perfect solution for iOS browser development and debugging in Safari

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.