Debugging in VS Code

Everyone’s been there before. Your code doesn’t work like you expect, your coffee cup is dry, and you’re out of ideas. You need something better than the good-old trusty console.log. Well never fear, building upon our existing support for debugging in Titanium, and the first-class support for debugging in VS Code, we’ve been able to bring the debugging experience to the VS Code to help you track down those difficult bugs.

In this post, we’ll go through getting your system setup for debugging, how to debug your application, and some tips and tricks to make the most of your debugging experience.

Getting setup

To use the debugger, you must be using Appc CLI 7.1.0 or higher. You can install this using appc use latest. After installing that, if you’re only debugging on Android, there’s nothing else required. You’re good to go! For iOS, we need to install a couple dependencies.

Firstly, install brew, follow the instructions on the homepage to install it.

Once you have brew installed, we need to install usbmuxd, libimobiledevice, and ios_webkit_debug_proxy. You can install these using the below commands:

brew install --HEAD usbmuxd
brew install --HEAD libimobiledevice
brew install ios-webkit-debug-proxy

That’s the installation finished!

If you’re debugging to an iOS device, there’s one last configuration to do. Enable the Web Inspector in your device’s settings under Settings->Safari->Advanced.

Generating a Launch Configuration

Debugging in VS Code is powered by launch configurations. These tell VS Code what debugger to use, and allow you to provide information to the debugger about what it should do.

To generate a launch configuration, navigate to the Debug view, and click the Configure gear icon on the top bar. This will give you a list of available debuggers for your environment, select “Titanium” and two default basic configurations are generated, “Launch on Android” and “Launch on iOS”. You can customize these to your liking, but more on that later!

Starting the debugger

So, you’ve got your launch configurations generated – now to use them! Select the configuration of your choice from the dropdown and hit the green play button. The extension will prompt for any required information, start the build process and then connect to the application to start the debugger.

Supercharging your debugging experience

Here are some tips to help take your debugger skills to the next level.

Customize your launch configurations

The default launch configurations are enough to get you started, but what if you don’t want to click through those dialogs every time? Well, you can set properties in your launch configuration to get you debugging quicker. You can set the following properties:

So, if you commonly debug to the same iOS device, you can create a debug configuration for it! Check out the example below.

{
"name": "Launch on iOS device - my iPhone",
"type": "titanium",
"request": "launch",
"platform": "ios",
"target": "device",
"deviceId": ""
}

Interact with your app using the Debug Console

While you’re debugging your app, you might want to experiment with some code. If you open the “Debug Console” tab, you have full access to your the runtime in your application. You can test out HTTP calls, edit your UI, and inspect variables in the current context. One thing to note: generally, this will run the code in the global context, i.e. if you’re using Alloy, you won’t be able to access variables in a controller. If you want to use this in the context of a certain controller, you must first activate a breakpoint in that controller.

Make use of conditional breakpoints

VS Code allows you to set breakpoint to activate in certain circumstances. This is great for if you want to start debugging when a certain condition occurs. If you right-click a breakpoint, you can choose “Edit Breakpoint” and add an expression that must evaluate to true in order for the breakpoint to hit.

Make use of the watch section

VS Code allows you to hover over variables to see their values, but you don’t want to be scrolling up and down your code to keep track of these. You can add variables to the watch section to always keep their value viewable. You can even add an expression like currentUser.loggedIn === true to the watch pane!

Looking to the future

We’re always looking to improve upon what’s already there. Here are some items we have planned to improve the debugging experience some more:

• Attach support – Restart your debugging sessions without needing to rebuild the app
• Start debugging directly from the Titanium Device view
• Generate launch configurations from the Titanium Device view