How to debug a hybrid app on iOS

Recently looking for on the xcode debug hybrid application method, such as I want to debug breakpoints, log printing, screen adaptation, and so on, deliberately to search the next method, although it has been generally known, here the system summed up, the original in the https:// developers.redhat.com/blog/2017/07/12/how-to-debug-your-mobile-hybrid-app-on-ios/, with the picture or with the text in the map, here is just a translation.

As you know, sometimes it's very difficult to debug a program on a mobile device. For Android and for Web applications, we have Chrome Developer tools , this is our common way, then IOS we have a similar way, that is Safari Web insepctor .

With the release of iOS 6 and Safari 6, Apple has also published Web checker to debug and create Web pages, which means we can see on our computer how the program running on our phone is going on, and debugging it, let me explain in detail the whole environment.

tip: you have to have a Mac computer first.

System Requirements

• MacOSX Lion version 10.7.4 or greater
• Certified USB Cable
• Safari 6
• Device/emulator
• XCode 4.5 or later with IOS 6 SDK or later

Open the developer Options Safari Configuration on your PC 1. Open Safari (the first step in the picture) and then click Safari in the upper-left corner of the toolbar (the second step in the figure)

2. Click Preferences (Preferences)

3. Click "Advanced" (1th Step), then turn on the "develop" option in the menu bar "Show Develop menu in menu bar" (2nd step in the figure)

4. Close the window and you will be able to see the "Develop" "Develop" option on Safari's toolbar.

Safari configuration on your device

To get your phone to be debugged, you'll need to set up the following steps on your phone.

1. Click Settings to find Safari

2. Click Enter, swipe down until you find the advanced option

3. Turn on the Inspector Switch "Web Inspector"

Run the project on the device

When we have configured the above settings, then we need to put down the app's source code, we can run the project on our device.

1. Connect your computer using USB, open Xcode, run the project

2. If the program opens normally on your phone, you can open safari on your PC and click on "Develop" "Developer" option

3. This will open a new window on the development tool

Development Tools Parsing Network (networks)

Resource (resources)

This section lists all the resources on the app and you can browse them

Time axis (timelines)

You can see how much time is spent on your app loading, network requests, layout rendering, and JavaScript event execution. This can be useful when you have high performance requirements for your app.

Debugger (Debugger)

Similar to Chrome's debugging tools, you can also do single-step, breakpoint debugging. Here is not to repeat, want to know more can be self-Google

Local Storage (Storage)

Control Console (console)

Here, you can print the information and execute the command, and so on.

How to debug a hybrid app on iOS