3

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.

Community
  • 1
  • 1
  • Could you please clarify your question? Where do you want the page to be running, and what is an example of the kind of editing you want to do? – Callahad Jun 15 '15 at 16:08
  • Hello and thanks for your answer! Consider [this pen](http://codepen.io/jQzz/full/KpvqNE/), I'd like to browse it via my Firefox OS and get [those devtools](http://puu.sh/iqj7f/2126c38a7e.png) **with my Firefox OS native browser** (and not with Firefox Developer Edition—or the last screenshot). –  Jun 15 '15 at 22:51
  • What does it tell you when you do `adb root` in a terminal? – Loïc Faure-Lacroix Jun 16 '15 at 12:25
  • Here is what I've (I've run this command while my Firefox OS is plugged into my iMac via an USB port): http://puu.sh/iqX5U/3df59dd02a.png –  Jun 16 '15 at 13:23
  • I've unplugged/plugged again my Firefox OS and, now, when I run `adb root`, it returns: `adbd is already running as root`. –  Jun 16 '15 at 13:36
  • @jQzz yep everything is fine. adbd has to run in root. In order to allow requesting higher privileges. or manually do it like in my answer. – Loïc Faure-Lacroix Jun 16 '15 at 19:52

2 Answers2

2

If I understand correctly, you're trying to connect the Firefox Developer Edition WebIDE on your desktop to a tab that is open on your Firefox OS phone. Something like this?

Screenshot of Firefox DevEdition's WebIDE debugging a webpage in Firefox OS

If that's right, once you connect to your phone in the WebIDE, you should see a list of open browser tabs at the bottom of the "Open App" menu, which is in the top left of the WebIDE panel.

Callahad
  • 1,280
  • 6
  • 9
  • Thanks for your answer! You've understood the problem. ;) I'm trying what you said. When I plug my Firefox OS on my iMac on a USB port, Firefox WebIDE detects my Firefox OS: http://puu.sh/iqToG/9e1661b702.png On my phone I've a notification telling me: 'An incoming request to permit remote debugging connection was detected. Allow connection?' I answer OK. Under the Open App menu, I've just these options: http://puu.sh/iqTwM/91490d3140.png (test-form is just a basic test for an app). Any idea? –  Jun 16 '15 at 12:04
  • That looks correct, but under "Runtime Apps" should be another section for "Tabs"... are you sure you have the tab that you want to debug open in your phone's browser? – Callahad Jun 16 '15 at 14:30
1

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.

Loïc Faure-Lacroix
  • 13,220
  • 6
  • 67
  • 99
  • Thanks for your answer! Normally, remote debugging is actived: `Homescreen > Settings > Developer > (under Developer Tools) Debugging via USB > **ADB and DevTools**` is selected. I've followed all the steps of the 'Using a real device' section and now I see a dropdown with a lot of apps I can debug! ;) Though, when I try to debug the Firefox OS browser app, I end up with this: http://puu.sh/iqZWQ/d72a7038cc.png I've followed the steps of [this article—french](http://builds.firefoxos.mozfr.org/doc/fr/devices/zte-open-c-fr). So my phone should be correctly rooted, right? –  Jun 16 '15 at 14:20
  • Actually, **it works on Firefox v.38.0.5**!! But **it doesn't work on Firefox Developer Edition v.40.0a2**. –  Jun 16 '15 at 14:27
  • Oh, strange! So we've got a bug with DevEdition's WebIDE. What version of Firefox OS is your Open C running? – Callahad Jun 16 '15 at 14:32
  • Rather strange yeah. My Firefox OS Open C OS Version is: **2.1.0.0-prerelase**. Platform Version: **34.0**. Update channel: **beta**. –  Jun 16 '15 at 14:45
  • Actually, it works on Firefox Developer Edition, but only from time to time... That's too irregular. :/ –  Jun 16 '15 at 14:54
  • I've filed [Bug 1175153](https://bugzilla.mozilla.org/show_bug.cgi?id=1175153) to track this. – Callahad Jun 16 '15 at 15:15
  • @jQzz When you see failures in Dev Edition, are there any errors in the [Browser Console](https://developer.mozilla.org/docs/Tools/Browser_Console)? – J. Ryan Stinnett Jul 01 '15 at 17:13