Testing your apps

WebIDE

Open your WebIDE to connect in your device

Connect by remote runtime

First, check if your device is on the list of adb devices command.

Connect your device to your computer using a USB port, then run the following command from your terminal:

$ adb root && adb forward tcp:6000 localfilesystem:/data/local/debugger-socket

Note: You can change the port, changing the tcp value of the command (tcp:PORT).

Then click in Remote runtime option

WebIDE - Remote runtime

Insert the IP and port (localhost:PORT) and click on OK button

WebIDE - Remote runtime port

Click on the Open Package App option and open the folder with your project, after opening your project it will be added in the session my projects.

WebIDE - Remote runtime project

Click on the play icon to open the app on the device

WebIDE - Remote runtime play

Click the button with the wrench icon to open the debugging tools

WebIDE - Remote runtime debug

The basic tools available in your WebIDE are:

  • The Inspector to examine and modify the HTML and CSS of a page.

  • The Console for logs information associated with a web page and enables you to interact with a web page by executing JavaScript expressions in the context of the page.

  • The JavaScript Debugger enables you to step through JavaScript code and examine or modify its state to help track down bugs.

  • Style Editor enables you to view and edit all the stylesheets associated with a page, create new stylesheets from scratch and import existing stylesheets and apply them.

  • The Scratchpad provides an environment for experimenting with JavaScript code. You can write, run, and examine the results of code that interacts with the web page.

Just as in a web page, any changes you make in the tools are visible immediately in the app, but are not persistent. Conversely, any changes you make in the editor pane can be saved straight back to disk, but are not visible without restarting the app.

WebIDE - Remote runtime debugging

Simulator

The simulator lets you run Gaia and Web apps in a Gecko-based environment somewhat similar to an actual device, for more details and to download the simulator consult the page of the simulator.

Running and debugging apps

Open the simulator

Simulator

Click the simulator option on the right side of the screen

Simulator

Click on the Open Package App option and open the folder with your project

Simulator - Package

Your project will open, displaying a tree with the files

Simulator - Package

Click on the play icon to open the app on simulator

Simulator - Play

Simulator - Play

Click the button with the wrench icon to open the debugging tools

Simulator - Debugging