Page tree
Skip to end of metadata
Go to start of metadata

Smartface provides application debugging feature for Android devices. In this guide we will learn how to use debug features.

Requirements

  • Android device ( phone or tablet )
  • Decent & reliable internet connection

Application Flow

  • Application is loaded
  • Debugger connects
  • app.js is loaded and executed
  • Application.onStart is fired
  • Asynchronous tasks:
  • First Page’s onShow event is fired
  • Network Object events are fired if they run at startup

Until the debugger is connected, the debugging of the previous steps is not possible with the conventional methods.

Starting Debug

In order to start debugging, you need to open "Debugger panel" and enable "Run in Debug Mode" as shown in the screenshot;

After that you can start debugging with pressing "Run on Device" module which is same as testing an application on real device

After scan, your Smartface App will download the application with debug features.

After a successful connection, Cloud IDE debugger panel will opened automatically (if it is closed) and debugger functionalites will be available.

Debugging Features

Smartface provides several features with the JavaScript debugging on device.

Breakpoints

A JavaScript code can be debugged with pressing to the left gutter area on the script editor. This action marks that line with a red circle on gutter to pause there when the code at that line about to be executed.

Also, breakpoints are listed at the debugger panel. When you right click the breakpoint section you will see an action list menu for it which are;

  • Remove Breakpoints
  • Remove All Breakpoints
  • Deactivate Breakpoints
  • Enable All Breakpoints
  • Disable All Breakpoints

Watching Variables

To track the value of a variables, it has to be added to watch. Adding to watch can be done in several ways:

  • On the script editor, highlight a text, right click on menu and click "Add as Watch Expression". 

  • On Watch Expressions section, the value to be watched can be written to the given text area.

Local Variables

The Local Variables panel displays all variables in global scope and the current function scope. All parent scope items are displayed in the global scope. The properties of objects are displayed in tree mode which can be expanded.


Call Stack

The Call Stack in JavaScript, in other words Call Frame; displays list of call stacks and changes the view for selected call stack. With a single select on call stack panel item, the values on local variables and watch might be updated regarding to the function scope.

Step Controls

Smartface supports basic stepping functions:

  1. Step over (F10) : The currently-selected line is executed and suspends on the next executable line
  2. Step into (F11) : The next expression on the currently-selected line to be executed is invoked, and the execution suspends at the next executable line in the method that is invoked.
  3. Step out (Shift + F11) : The execution resumes until the next return statement in the current method is executed or execution reaches the end of the current function, and execution suspends on the next executable line.

Immediate Debug

Immediate panel allows you to insert codes into your running application. Written immediate commands directly run on the working application.