Firefox remote debug android

Remote firefox debugging on android

August 08, 2012 2 minute read

In the previous article I wrote about remote debugging web applications using chrome on Android. If you don’t want to use chrome or you want to test and debug your application on a different mobile browser you can also use firefox mobile to debug (and use FF15+ on the desktop). The process is pretty much the same as for chrome.

If you want to use a different mobile browser see these two articles:

1. Remote debugging using chrome
2. Remote debugging using opera.

1. Connect your mobile device with USB to your desktop computer
2. Setup your mobile firefox for remote debugging
3. Configure your desktop browser for remote debugging
4. Connect desktop browser to mobile browser and start debugging

To start debugging you have to connect your mobile device using USB to your desktop. Once you’ve done this you can use the android ‘adb’ tool to setup a debug connection to your tablet or phone. If you need instructions on how to setup ‘adb’ see the previous article on chrome.

Setup your mobile firefox for remote debugging

Open your mobile firefox (make sure you’ve got the latest firefox mobile beta) and enter “about:config” in the url. This will open a screen where you can edit settings. In this screen set the “devtools.debugger.remote-enabled” to “true”:

Now restart firefox, and that’s it for this part.

Setup your desktop firefox for remote debugging

Next we need to configure firefox on your desktop for remote debugging (I’m using a nightly build). Once again go to the “about:config” url. This time set the “devtools.debugger.remote-enabled” property to true.

Restart your browser and now you’ll have a new entry in the “tools->web developer” menu called “Remote Debugger”

Connect desktop browser to mobile browser and start debugging

Now you’re pretty much ready to start debugging. We mentioned at the start that we’re going to use android’s adb tool to set up the debug channel. To do this, run the following command:

Now point the browser on your mobile device to the page you want to debug and open your firefox on the desktop. On your desktop firefox select the “tools->web developer->Remote Debugger” option. Just click enter on this popup:

When you do, you’ll see another popup appear, but this time on your mobile device.

You’ve got a couple of seconds to click the Ok button, and once you do, a remote debugging session will be created. From your desktop you can now set breakpoints, view scripts etc.

View code:

Set breakpoints:

And that’s it! Very easy, and another great way to make debugging web/html applications on your mobile device easier. In the next couple of days, I’ll also show how you can do this with Opera.

Updated: August 08, 2012

Share on

You may also enjoy

Working with nix-shell

Managing runtime dependencies using Nix We’re setting up a new project at work, and wanted to apply some lessons learned from previous projects. One of the .

Exploring Cats Effect

In two previous articles we explored how you can use ZIO to easily create programs in a type-safe manner: Exploring ZIO — Part I Exploring ZIO — Part I.

Exploring ZIO — Part II — ZStream and modules

In the previous article we looked at the basics of ZIO. In this part we’re going to extend on that example and add the following: ZStream integration: we.

Exploring ZIO — Part I

I’ve done a lot of Kotlin for the last two years, and have mainly followed Scala and done some pet projects. Since a lot of interesting stuff has been going .

Источник

Debugging Firefox for Android over USB

This article describes how to connect the Firefox Developer Tools to Firefox for Android from Firefox 36 onwards. For connecting over WiFi, see corresponding page.

It’s been possible for a long time to connect the Firefox Developer Tools to Firefox for Android so you can debug your mobile website. Until now, this was a fairly complex and error-prone process. From Firefox 36 we’ve made the process much simpler: in particular, you don’t need to deal directly with the adb tool at all. Now you connect using WebIDE, which takes care of setting up adb behind the scenes.

For this to work, you need at least Firefox 36 on the desktop and Firefox 35 on the mobile device. If you need to use an earlier version, see the older instructions for connecting the developer tools to Firefox for Android.

WebIDE’s project management and installation features aren’t available here, as they currently only work with Firefox OS devices. On Android devices, only existing websites already loaded into the browser can be debugged.

This guide’s split into two parts: the first part, «Prerequisites» covers stuff you only need to do once, while the second part, «Connecting», covers stuff you need to do each time you connect the device.

Prerequisites

First, you’ll need:

• a desktop or laptop computer with Firefox 36 or higher running on it
• an Android device capable of running Firefox for Android with Firefox for Android 35 or higher running on it
• a USB cable to connect the two devices

ADB Helper

Your desktop Firefox also needs to have the ADB Helper add-on, version 0.7.1 or higher. This should be installed for you automatically the first time you open WebIDE. To check the version, type about:addons into the browser’s address bar and you should see ADB listed.

If you don’t have ADB Helper version 0.7.1 or higher, select «Manage Extra Components» from the «Projects» menu, and you’ll see the «Extra Components» window, which will contain an entry for ADB Helper:

Click «uninstall» then «install», and you should now have the latest version.

Setting up the Android device

To setup your Android device you need to enable USB debugging on the device and in Firefox.

Enable USB debugging

Follow steps 2 and 3 of this link only to enable USB debugging on your Android device.

Enable remote debugging in Firefox for Android

Open the browser, open its menu, select «Settings» (on some Android devices you may need to select «More» to see the «Settings» option), then this depends on your browser version:

• version 36 to 41: select «Developer tools», then «Remote debugging»

• version 42 to 44: select «Developer tools», then «Remote debugging via USB»

• version 45 or later: select «Advanced», then «Remote debugging via USB»

Connecting

Connect the Android device to the desktop with the USB cable, and open WebIDE. Select «Firefox for Android» listed as a debugging target under «USB DEVICES»:

On the Android device, you’ll now see a warning message. Depending on your version, click «OK» or «Allow»:

Now click the «Open App» menu in WebIDE. You’ll see a list of all the tabs open on the device:

Select a tab to attach the developer tools to it:

Now you should be able to use all the Firefox developer tools that support remote debugging. See the page on remote debugging for more details.

When finished, for security reason, you might disable Android’s USB debugging and Firefox’s remote debugging by reverting the process above.

Troubleshooting

If you’re having trouble getting this to work, check the Troubleshooting page for things to double check and support forums you can contact.

Источник

В Firefox 15 появилась удаленная отладка для мобильных устройств

Как известно в Firefox начиная с 10ой версии, появился свой нативный отладчик. И теперь, вслед за GoogleChrome, в Firefox 15 появится удаленная отладка для мобильных устройств. Уже есть видео (EN)с демонстрацией настройки и подключения отладчика. Для этого вам нужно поставить Firefox beta

Этот пост — сокращенный и вольный перевод видео и оригинальной статьи

Для того чтобы включить отладчик, необходимо открыть about:config. Находим devtools.debugger.remote-enabled и ставим значение в true. После этого необходимо перегрузить браузер.
В меню у нас появится пункт tools>web development>Remote Debuger

Следующим шагом настраиваем Firefox на Adnroid (здесь так же необходимо использовать Firefox 15 который можно установить из магазина приложений).
Для настройки переходим в about:config, и устанавливаем:

• для devtools.debugger.force-local значение false
• а devtools.debugger.remote-enabled переключить на true

После этого перезапускаем Firefox на телефоне.

Для того чтобы подключиться к firefox на телефоне/планшете нам необходим сетевой адрес, который устройство получило при подключении к Wi-Fi. Его можно посмотреть Settings>Wi-Fi>BwaDown

Все приготовления закончены можно начинать отладку. Пример из видео

• Заходим на нужный сайт на телефоне.
• На Desktop’е в FF выбираем пункт Remote Debuger и в качестве адреса подставляем IP адрес телефона + стандартный порт 6000 (при условии что вы его не изменяли в настройках на телефоне)

При соединении, нем необходимо будет подтвердить подключение к устройству в диалоговом окне.

На этом все, и May the Force be with you

Источник

Remotely debugging Firefox for Android

This guide explains how to use remote debugging to inspect or debug code running in Firefox for Android over USB.

Мы недавно сильно упростили процесс подключения инструментов разработки к Firefox для Android. Если вы работаете с Firefox Desktop 36 или новее, и Firefox для Android 35 или новее, то попробуйте новый процесс вместо этого.

This guide’s split into two parts: the first part, «Prerequisites» covers stuff you only need to do once, while the second part, «Connecting», covers stuff you need to do each time you connect the device.

Prerequisites

First, you’ll need:

• a desktop or laptop computer with Firefox 15 or higher running on it
• an Android device capable of running Firefox for Android with Firefox for Android 15 or higher running on it
• a USB cable to connect the two devices

ADB setup

Next, you’ll need to get the desktop and the Android device talking to each other using the adb command-line tool.

On the Android device

• Enable USB debugging (step 2 of this link only).
• Attach the device to the desktop via USB.

On the desktop

• Установите корректную версию Android SDK для вашего устройства.
• С помощью Android SDK установите инструменты платформы Android Platform Tools.
• Платформа Android Tools устанавливает adb (Android Debug Bridge) в директорию «Platform-инструментов», в которой установлена Android SDK. Убедитесь, что каталог «инструментов платформы» находится в переменной окружения path.

To check it worked, open up a command shell on the desktop and type:

You should see some output like:

(The long hex string will be different.)

If you do, then adb has found your device and you’ve successfully set up ADB.

Enable remote debugging

Next, you need to enable remote debugging on both the Android device and the desktop.

Firefox for Android 24 and earlier

To enable remote debugging on the device, you need to set the devtools.debugger.remote-enabled preference to true .

Go to about:config in Firefox for Android, type «devtools» into the search box and press the Search key. You’ll see all the devtools preferences. Find the devtools.debugger.remote-enabled preference, and press «Toggle».

Firefox for Android 25 and later

On Firefox for Android 25 and later, there’s a menu item to enable remote debugging. Open the menu, select «Settings», then «Developer tools» (on some Android devices you may need to select «More» to see the «Settings» option). Check the «Remote debugging» box:

The browser will display a notification reminding you to set up port forwarding, which we’ll do later on.

On the desktop

On the desktop, remote debugging is enabled by a setting in the Toolbox. Open the Toolbox, click the «Settings» button in the toolbar, and check «Enable remote debugging» in the Settings tab:

You’ll then see a new option in the Web Developer menu labeled «Connect. «:

Connecting

Now you can connect the remote debugging tools to the device. First, attach the device to the desktop with a USB cable, if you haven’t already.

On the desktop

For Firefox for Android 35 and later, go to a command prompt, and type:

For Firefox for Android builds in other channels, the org.mozilla.firefox part should be changed to:

• org.mozilla.firefox_beta for Beta
• org.mozilla.fennec_aurora for Aurora
• org.mozilla.fennec for Nightly

For Firefox for Android 34 and earlier, type:

(If you’ve changed the value the Android device uses for a debugging port, you’ll need to adjust this accordingly.)

For Firefox OS, type:

You’ll need to reissue this command each time you physically attach desktop and device with the USB cable.

Then go to the Web Developer menu on Firefox, and select «Connect. «. You’ll see a page that looks like this:

Unless you’ve changed the port numbers, choose 6000 and press the «Connect» button.

On the Android device

Next you’ll see a dialog on the Android device asking you to confirm the connection:

Press «OK». The desktop waits for a few seconds to give you time to acknowledge this dialog: if it times out, just press «Connect» in the desktop dialog again.

On the desktop

Next, the desktop shows you a dialog that looks something like this:

This is asking whether you want to debug web content running in a browser tab, or to debug the browser code itself.

• You’ll see one entry under «Available remote tabs» for each open tab, and clicking it will attach the debugging tools to the web content hosted by that tab. If you want to debug your web content, you’ll choose the relevant content tab.
• You’ll see one entry under «Available remote processes»: this is the browser process itself. You’ll choose this option if you want to debug the browser’s own code.

Let’s choose to attach to the mozilla.org website. The Toolbox will open in its own window, attached to the Firefox for Android tab that’s currently hosting mozilla.org:

The Toolbox, and the tools it hosts, work in just the same way as they do when attached to local content.

Источник