Korištenje Upravitelja aplikacija

Upravitelj aplikacija je novi alat dostupan u Firefoxu za Desktop, koji pruža nekolicinu korisnih alata koji će vam pomoću kod testiranja, razvijanja i debugiranja HTML5 web aplikacija za Firefox OS telefone i Firefox OS Simulator, izravno iz preglednika.

Upravitelj aplikacijama je namijenjen programerima koji ciljaju na Firefox OS 1.2 ili noviji. Ako razvijate aplikacije za Firefox OS 1.1, trebali bi ste pregledati dokumentaciju za Firefox OS 1.1 Simulator.

Upravitelj aplikacija se sastoji od:

  • Apps panel, koji upravlja lokalnim aplikacijama (kôd aplikacije koji se nalazi na Vašem računalu) i vanjskim aplikacijama, dopuštajući vam da ih pakirate i instalirate na Vaš uređaj ili simulator i debugirate koristeći Alate
  • Device panel, koji prikazuje informacije o spojenom uređaju uključujući instaliranu verziju Firefox OS-a, dozvole potrebne za korištenje API-jeva uređaja na uređaju i instalirane aplikacije
  • Toolboxes, setovi programerskih alata (web konzola, inspektor, debugger, itd.) koji mogu biti povezani s pokrenutom aplikacijom preko Apps panela za provođenje debugging operacija

Brzo postavljanje:

Ova sekcija je zamišljena da krenete što prije; ako trebate više detalja, molimo skočite do Device and system configuration sekcije i počnite čitati ondje.  Također pogledajte Troubleshooting sekciju za pomoć ako imate probleme.

  1. Instalirajte Firefox 26+ ako već niste
  2. Otvorite Upravitelj aplikacijama (u URL bar utipkajte about:app-manager)
  3. Ako nemate stvaran uređaj:
    1.  Instalirajte Firefox OS Simulator
    2. U toolbaru Upavitelja aplikacija, kliknite na Start Simulator, zatim kliknite na ime instaliranog simulatora, koji bi se trebao pojaviti.
  4. Ako imate stvaran uređaj:
    1. Vaš uređaj mora imati instaliran Firefox OS 1.2+
    2. U Windows, instalirajte drivere ponuđene od proizvođača uređaja
    3. U Postavkama uređaja, onemogućite Zaključavanje zaslona (Postavke > Zaključavanje zaslona) i omogućite Udaljeni debugging (Postavke > Informacije o uređaju > Više informacija > Programer)
    4. Instalirajte ADB Helper dodatak za Firefox Desktop
    5. Povežite Vaš uređaj s Vašim računalom pomoću USB kabela
    6. Trebali biste vidjeti ime Vašeg uređaja na dnu Upravitelja aplikacija. Kliknite na nj.
  5. Na dnu bi trebalo pisati "Connected to: xxx"
  6. Kliknite na Apps panel i dodajte aplikaciju (pakiranu ili hosted)
  7. Refresh gumb potvrdi aplikaciju i instalira ju na Simulator/Uređaj
  8. Debug gumb poveže programerske alate na povezanu aplikaciju
  9. Pogledajte  Troubleshooting sekciju ako imate probleme.

Postavljanje uređaja i sustava

Prva stvar koju morate učiniti prije korištenja Upravitelja aplikacijama je provjeriti jesu li sustav i uređaj dobro podešeni.

Firefox 1.2+ potreban

Provjerite koristi li Vaš uređaj Firefox OS 1.2/Boot2Gecko 1.2 ili noviji. Kako biste provjerili koju verziju Firefox OS-a koristite, idite u Postavke > Informacije o uređaju > Softver.

Ako nemate potrebnu verziju instaliranu, ovisno o uređaju koji posjedujete, morat ćete ili instalirati dostupni nightly build Firefoxa 1.2+ ili podesiti i izraditi samostalno iz izvora.

Dostupni buildovi:

Kako biste izradili vlastitu Firefox 1.2+ distribuciju, slijedite upute na Building and installing Firefox OS, počevši s Firefox OS build prerequisites.

Udaljeni debugging

Next, you need to enable remote debugging in Firefox OS. To do so, go to Settings > Device information > More information > Developer and check the Remote Debugging checkbox.

ADB or ADB helper

The process uses the Android Debug Bridge (ADB) to handle the device-computer connection and communication. There are two options for running ADB:

  • Let Firefox handle ADB (recommended). Install the ADB Helper add-on, which makes the process easier. With this installed, there's no need to install the ADB, and no need to type the adb forward command: everything is handled by the add-on.

    Download ADB Helper Add-on
  • Use ADB manually. You need to have it installed on your computer: download and install adb as explained in Installing ADB. You'll need to enable port forwarding by entering the following command into your terminal:
    adb forward tcp:6000 localfilesystem:/data/local/debugger-socket
    Note that you'll need to do this every time the phone is restarted or unplugged then re-plugged.

Note: There's no need to run this command if you installed the ADB Helper Add-on.

Connecting your device to the App Manager

With all your configuration done, it's now time to plug your device into your computer and start the App Manager:

  1. Plug the device into your computer via USB.
  2. Disable Screen lock on your device by going to Settings > Screen Lock and unchecking the Lock Screen checkbox. This is a good idea because when the screen gets locked, the phone connection gets lost, meaning it is no longer available for debugging.
  3. Start the App Manager — In Firefox Desktop select the Tools > Web Developer > App Manager menu option, or type about:app-manager in the URL bar.
  4. At the bottom of the App Manager tab, you will see a connection status bar (see screenshot below). You should be able to connect your device by clicking the "Connect to localhost:6000" button.
  5. If this works successfully, a prompt should appear on your device: "An incoming request to permit remote debugging connection was detected. Allow connection?". Tap the OK button (You may also have to press the power button on the phone so you can see the prompt.) The connection status bar should update to say "Connected to B2G", with a Disconnect button available to press if you want to cancel the connection.

Note: The other controls in the connection status bar allow you to connect a simulator to the App Manager, which we cover in the next section, below, and change the port that the connection happens on. If you change the port, you'll also need to enable port forwarding for this port as well, as instructed in the Enable port forwarding section, above.

Using a Firefox OS Simulator Add-on

If you haven't got a real device available to use with App Manager, you can still try it out using a Firefox OS Simulator Add-on. To start off, install the simulator with the following button (multiple versions are available; you are advised to install them all, for maximum flexibility):

Install Simulator

Once you've installed the simulator(s), you need to go to about:app-manager to see the connection status bar at the bottom of the App Manager tab, and click the "Start simulator" button. At least three buttons will appear:

  • "Firefox OS 1.3", "Firefox OS 1.2" ... etc. (or something similar): the leftmost buttons contain the names of the simulator versions you have installed. Click one to start a connection to a simulator.
  • "Add": the middle button navigates to the simulator install links in this article, so you can add more Simulators (Firefox OS 1.2, Firefox OS 1.3, ...).
  • "Cancel": the right hand button cancels the connection.

Note: The Simulator (v 1.2 and 1.3) currently reports an incorrect Gecko user agent string: see bug 964598 for more details.

Apps panel

Now everything is working, let's review the functionality available inside the App Manager, starting with the Apps panel. From here, you can import an existing app to push onto your device and debug:

  • To install a local app, click on the plus next to the "Add Packaged App" label and use the resulting file chooser dialog to select the directory your app is contained inside.
  • To install an externally hosted app, enter the absolute URL of the app's manifest file into the text field inside the "Add Hosted App" box, then press the plus button.

Information about your app should appear on the right hand side of the window, as seen below:

Manifest editor

From Firefox 28 onwards, the Apps Panel includes an editor for the app manifest:

Debugging

Clicking on "Update" will update (install) the app on the device. Clicking on "debug" will connect a toolbox to the app, allowing you to debug its code directly:

Note: You'll enjoy playing around with the toolbox — try altering the DOM, CSS etc. and you'll see the updates reflected on the device in realtime. Such updates will be saved on the installed app code; you'll see them next time you open the app on the device.

Before Firefox 28, the tools are launched in a separate window. From Firefox 28 onwards, the tools are launched in a separate tab in the App Manager itself, alongside the Apps and Device tabs. The tab is given your app's icon so it's easy to find:

Errors

If an app was not added successfully — for example if the URL was incorrect, or you selected a packaged app folder — an entry will be added to the page for this app, but this will include error information.

You can also delete an app from this view, by hovering over the App name/description on the left of the window, and pressing the "X" button that appears in each case. This however doesn't remove the app from the device. To do that you need to manually remove the app using the device itself.

Device panel

The Device tab displays information about the connected device. From the "Installed Apps" window, apps on the device can be started and debugged.

Note: Certified Apps are not listed by default. See how to debug certified apps.

The "Permissions" window shows the required priviledges for different Web APIs on the current device:

Finally, you can take a screenshot of the current device display by clicking the "Screenshot" button. The screenshot appears in a new tab on Firefox, and from there you can save or discard it as you wish.

Debugging Certified Apps

Currently only devices running a development build of Firefox OS 1.2 are capable of debugging certified apps. If you have a development build, you can enable certified app debugging by changing the pref devtools.debugger.forbid-certified-apps to false in your profile. To do this, follow the steps below:

  1. On your computer, enter the following command in Terminal/console to enter your device's filesystem via the shell:

    adb shell

    Your prompt should change to root@android.

  2. Next, stop B2G running using the following command:

    stop b2g
  3. Navigate to the following directory:

    cd /data/b2g/mozilla/*.default/
  4. Here, update the prefs.js file with the following line:

    echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' >> prefs.js
  5. After you've finished editing and saving the file, start B2G again using the following command:

    start b2g
  6. Exit the android filesystem using the exit command; this will return you to your normal terminal prompt.

  7. Next, reconnect to the App Manager and you should see certified apps appear for debugging.

Note: If you want to add this preference to your Gaia build you can run make DEVICE_DEBUG=1 reset-gaia.

Running custom builds in the App Manager

You can run custom B2G Desktop and Gaia builds in the App Manager via the simulator. Read Running custom Firefox OS/Gaia builds in the App Manager for more details.

Troubleshooting

If the device is not recognized:

Can't connect your device to the App Manager or start the simulator? Let us know or file a bug.

Document Tags and Contributors

 Contributors to this page: chrisdavidmills, jsx, teo17, Mikulino
 Last updated by: chrisdavidmills,