To start debugging, you have to enable
Develop menu in Safari’s settings. To do so, open preferences pane in Safari (or press
Cmd + ,) and go to
Advanced tab. There, you have to check
Show Develop menu in menu bar. This will make developer tools visible to you. Next, you connect your device to your Mac using cable or have it connected to the same network as your Mac (if you have enabled wireless debugging in Xcode). Alternatively, you start a simulator you want to test with from Xcode. They should show up just below
User Agent in the
Develop menu. If you don’t see them, please restart Safari.
Develop menu choose your device and select
Use for development.
Following this, you will have to approve the request to trust your computer.
You also have to prepare an iOS device or simulator. First, open
Settings app, go to
Safari, and then to
Advanced menu. In there, you have to enable
Web Inspector option.
To showcase the debugging process, I will use
JSContext of your app that is available on your device. It means that the app needs to be running.
JSContext, Web Inspector will show.
On the right side of the window, all local properties are listed. To access a button, we need to get a reference on. We can do this by using
cid property and
tabris_1.contentView.find(widget => widget.cid === "$16")
The result of every operation is saved in a temporary variable; in this case, it’s
find()and it returns an array of widgets that meet the condition. In our case, it will only be one widget. We can save it under a new variable by executing the following line:
Let’s change this button’s text.
$2.text = "New text"
Pausing app execution on app start
Automatically show Web Inspector for JSContexts.
If this option is unchecked, the debugger will not stop at the breakpoint we have just placed. We can start the app now and… it stops exactly where we placed the breakpoint. From this point on, you can inspect and debug your app in whatever capacity you need.
As you’ve probably noticed, there is a second checkbox called
Automatically Pause Connecting to JSContexts. I rarely use this option as it pauses your app’s execution as soon as Web Inspector is opened (automatically or manually). This may result in an application being paused in an unpredictable state. However, if you use this option in conjunction with
boot.js starts its execution. You can start from this point, but you will have to do a lot of steps to get into your source file. I almost never use this method of pausing the app execution on the app start since it’s way too early in the app’s lifecycle to be useful.
Feedback is welcome!Want to join the discussion?
Feel free to contribute!