Search code examples
firefoxfirefox-osgeckofirefox-developer-toolsfirefox-developer-edition

Show Firefox OS devtools on Firefox Developer Edition 'desktop'

I've an iMac with OS X Yosemite v.10.10.3. I use Firefox Developer Edition 40.0a2. I've a ZTE Open C (FR version) with Firefox OS; Boot2Gecko 2.1.0.0-prerelease (B2G OS).

What I'd like to do is the following: I've a basic webpage (mostyl HTML, CSS and JS) opened in my browser on my Firefox OS phone. I'd like to get the devtools (Cmd+Shift+i) and be able to edit that webpage with my Firefox Developer Edition browser on my iMac.

I've already tried these things:

With webIDE, I can build a new app for Firefox OS (with or without a base theme) and I can use the devtools to inspect the DOM and stuff like that. I just want to achieve the exact same thing but directly on my desktop computer.

Do you have any clue?
Feel free to ask me if you need more piece of informations. ;)

Current status

When I launch the Firefox OS browser app, I can inspect (via the devtools) the homepage (DOM stuff, etc.). But when I load another webpage (Google for example), I can't inspect the DOM. Any idea about that?

I often get this message: http://puu.sh/ir2Ju/32563e51bc.png when I switch to several apps I want to debug.

Solution

  • When you connect your phone, you have to accept remote debugging.

    Then on the left of the window, you should see a dropdown menu with the apps that you can debug. By default, you can only debug unprivileged applications.

    Click on the app, the you want to debug and in the middle of the screen click on the "wrench". It is the button to activate debugging.

    Now the complicated part. In order to debug privileged apps such as the web Browser. You have to root your phone and change some preferences. To check that you have a rooted phone. Click on the runtime menu and then runtime info.

    If your adb is in root mode, then you can press the button to request higher privileges. You can also do that by hand.

    There for more info:

    https://developer.mozilla.org/fr/docs/Tools/WebIDE/Running_and_debugging_apps#Unrestricted_app_debugging_%28including_certified_apps.2C_main_process.2C_etc.%29

    https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager#Using_the_B2G_desktop_client

    Using a real device

    1. On your computer, enter the following command in Terminal/console to enter your device's filesystem via the shell:
    adb shell
    1. Your prompt should change to root@android. Next, stop B2G running using the following command:
     stop b2g
    1. Navigate to the following directory:
     cd /data/b2g/mozilla/*.default/
    1. Here, update the prefs.js file with the following line:
    echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' >> prefs.js
    1. After you've finished editing and saving the file, start B2G again using the following command:
     start b2g

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

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

    When this is done, you should see the application "Browser" in the list of available apps for debugging. At the same time, you should see all other application of your phone available as debugging.