Servoy 7.3 uses the standard Chrome debug protocol to setup a debugger for a mobile application. For this to work the mobile client needs to be exported in debug mode, this must be done by using the mobile export (Export Soluton->Mobile Export) and then enable the "Export in debug mode" checkbox. If that mobile solution is then executed on a mobile or in the desktop browser, it will talk back to the developer. This talk back is enabled if you have/had a mobile solution enabled in the developer once. The developer will then startup a special service under: localhost:8889.

If the mobile solution is running, then you can open in the chrome browser that same url: localhost:8889. That will open directly a the mobile solution in the debugger, or will present you with 2 or more tabs if you have multiply tabs or instances of the mobile solution open. Then you need to select the right tab or close a few old tabs first.

In the debugger tab of chrome you have a few tabs where you can inspect stuff, like the Resources tab to see the loaded or stored resources, the console tab where you can see the console output the client generates or the scripting tab where you can start debugging your actual code that is running in the mobile client, the navigator to all the sources are in the navigator (the arrow button on the left). Under "(no domain)" section you will find the same scripts you also have in the developer. You can open them to set breakpoints, these will now be hit when you hit that code in the mobile client.

You can also push changes right to the running client by making changes directly in the chrome browser and save those changes. This will push the changes to the mobile client and that code will be executed in the next run. If you reload the client or start the phonegap application again then these changes will be lost. The changes you do here are reflected right away in the workspace of the developerMobile applications can be debugged while running on actual devices like phones or tablets or in a desktop browser.

The debugger is a special instrumented version of the Google Chrome Developer Tools. This means that the Debugger inside Servoy Developer is not used and the Google Chrome is required to do debugging.

This feature is available as of Servoy 7.3.

Preparation

To be able to debug a mobile solution, the solution needs to be exported and deployed in debug mode:

1. In Servoy Developer, open the export wizard: Export Solution > Mobile Export
2. On the first page of wizard:
   1. set the Application Server URL to a url/ip address and port of Servoy Developer that can be reached by the device on which the solution is to be debugged.
   2. check the Export in debug mode checkbox
3. Finish the wizard and deploy the result

Note that solutions exported in debug mode require Servoy Developer to be running and accessible from the Mobile Client. When Servoy Developer is not available, the mobile solution will fail to launch.

Debugging

Once the Mobile solution is deployed and running, the debugger can be opened in Google Chrome on the machine where Servoy Developer runs on localhost:8889. Depending if there are multiple mobile debug clients connected, the page will first offer a list of clients to debug or go straight to the debugger if there's only one debug client connected.

The UI of the debugger sports a range of tabs at the top of the screen. Of those only the following two are functional:

• Console tab - displays the console output the client generates and allows interaction with the client through it's command line
• Sources tab - provides access to the JavaScript source files of the solution
  
  • The source files can be access through the little arrow button in the top left corner
  • The source files part of the solution design are located under the node for the IP address and port of the Servoy Application Server the solution is connected to, e.g. localhost:8080 or 192.168.1.10:8080

The other tabs are not functional at this point in time.

Breakpoints can be set by clicking in the gutter of the sourcefile and when hit, the tools in the right pane provide options to inspect code and to step through the code.

Note:  If you are using Chrome version 36 or higher, you may need to set "Allow insecure WebSocket from https origin" in chrome://flags,
else the debugger won't start.

Hot Code Replace

The source files can be edited and when saved the changes are simultaneously applied both in the running client as well as pushed into the workspace of Servoy Developer, so the changes are still applied after restarting either the debug client or Servoy Developer.