Child pages
  • Debugging Mobile

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Since Servoy 7.3 we started to utilize the standard Google Chrome debug protocol to debug a mobile applications.

This allows to debug a Servoy mobile client on an actual device such a phone or tablet or debug another browser(tab) running a mobile client.

Startup

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.

When the mobile solution is executed on a mobile or in the desktop browser, it will talk back to the Servoy Developer. This communication is enabled if the active solution is a mobile solution; in the background a special service is run as: localhost:8889

Usage

If the mobile solution is running, open in the Chrome browser to: localhost:8889. This will show a page to choose the client to debug (in case there are multiple clients running) or connect directly if only one present.

While in the debugger of Chrome, there are two tabs where you can inspect stuffServoy Mobile 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 - where debugging is started for the actual code that is running in the mobile client
    • The navigator (the arrow button on the left) gives access to all the sources.
    • Under localhost:8080 section there are the same scripts as in the Developer. One can open them to set breakpoints, these will be hit when that code in the mobile client is hit.

The other tabs do not work.

Hot Code Replace

...

  • 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

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 available when