iOS Safari debug iOS App Web page

Overview

The current mobile development process to use a lot of H5, JS and so on, and the debugging of these web pages in the Xcode console is not very clear, often our mobile app is the method of running, but can not show the effect of the response, this time may have been an error, But we don't see these errors in the Xcode console. At this point we can use the powerful Safari browser to open the development mode to connect the iphone to debug the app face of the Web page.

Safari settings

Open Safari Preferences settings, select "Advanced Menu", at the bottom of the page see "Show development menu in the menu" check box, check box tick, so set up to see the development menu in the Safari menu

iphone settings

Open iphone Settings App Choose Safari, find advanced options, have javascript switch Web Inspector switch, speak two switches are open

Debugging

Here, the preparation is completed. At this point the iphone link to the Mac, open Safari browser, run the mobile app inside the Web page, in the development menu select the connected phone, find the Debugging Web page, you can debug in Safari

Mobile phone Screen Cutting

Safari Debug Window

Safari Console

You can see the Safari console by right-clicking in Safari and selecting check elements. If you do not see the Check element option, open the development options according to the safari settings above

iOS Safari debug iOS App Web page