Connecting to a remote device

Firefox supports debugging over USB with Android devices, using theabout:debugging page.

Before you connect:

0. Ensure clicking once on “Enable USB Devices” inabout:debugging homepage.

1. Enable Developer settings on your Android device.Press 7 times on “Build Number” from your “About your phone” in the device settings app.

2. Enable “USB debugging” in the Android Developer settings.Detailed guide for 1. and 2.

3. EnableRemote Debugging via USB in the Advanced Settings in Firefox on the Android device.

4. Connect the Android device to your computer using a USB cable.If a USB cable is not available,connect to Android over Wi-Fi.

If your device doesn’t appear in the lefthand side of theabout:debugging page, try clicking theRefresh devices button.

If it still doesn’t appear, it may be because the link between your Android device and your computer is not authorized yet. First make sure you have installedAndroid Debug Bridge from Android Tools on your computer in order for it to be able to connect to your device. Next, disable every debugging setting already activated and repeat the steps described before. Your device should show a popup to authorize your computer to connect to it — accept this and then click theRefresh devices button again. The device should appear.

To start a debugging session, first open the page that you wish to debug and then clickConnect next to the device name to open a connection to it. If the connection was successful, you can now click the name of the device to switch to a tab with information about the device.

The information on this page is the same as the information on theThis Firefox tab, but instead of displaying information for your computer, it displays the information for the remote device with the addition of aTabs section with an entry for each of the tabs open on the remote device.

Note: If the version of Firefox on your remote device is more than one major version older than the version running on your computer, you may see a message like the following:

The message can look like the following:

See Connection for Firefox for Android 68 for more information.

In the image above, there are three tabs open:Network or cache Recipe,Nightly Home, andAbout Nightly. To debug the contents of one of these tabs, click theInspect button next to its title. When you do, the Developer Tools open in a new tab.

Above the usual list of tools, you can see information about the device you are connected to, including the fact that you are connected (in this example) via USB, to Firefox Preview, on a Pixel 2, as well as the title of the page that you are debugging, and the address of the page.

The URL bar is editable, so that you can change the URL used by the browser on the remote device, by typing in Firefox for Desktop. You can also reload the page by clicking theReload button next to the URL bar, and navigate backward or forward in the browsing history with theBack andForward buttons.

Connecting to Android over Wi-Fi

Firefox can debug Firefox for Android throughadb and the“Wireless debugging” feature of Android 11+, without requiring any USB cable.

Prerequisites:

• Device must run Android 11 or later.

• Theadb program is available. You do not need Android Studio nor the full Android SDK.

• The Android device and the computer withabout:debugging are in the same network.

Steps to connect wirelessly with the Android device:

1. Determine the IP address of your Android device on your local network. For example by locating the Internet/Wi-Fi setting and viewing details of the current (Wi-Fi) network.

2. Enable Developer options on your Android device.

3. Enable Wireless debugging by tapping on the toggle at the “Wireless debugging” bar at the Developer options, then tap on the “Wireless debugging” bar (before the toggle) to open the “Wireless debugging” screen.

   1. An alternative to the previous step is to open “Quick settings developer tiles” at Developer options, and enabling the “Wireless debugging” tile. After this, you can long-press the “Wireless debugging” tile from the Quick Settings panel to launch the “Wireless debugging” screen.

4. Tap on “Pair device with pairing code” in the “Wireless debugging” screen. This displays a six-digit code and an IP address and port. The port is unique to the pairing setup.

5. From the terminal, runadbpair[ipaddressfromstep1]:[portfromstep4] and enter the six-digit code from step 4.

6. To finally connect wirelessly, look up the (random) port at the “IP address & Port” section of the “Wireless debugging” screen. The port is distinct from step 4. Runadbconnect[ipaddressfromstep1]:[portfromstep6] to connect.

Now, the adb server on your computer is connected with the adb daemon on the Android device. All Firefox apps with the “Remote Debugging via USB” setting enabled will now appear inabout:debugging.

If you do not see any Firefox for Android debugging target:

• Confirm that adb is connected by runningadbdevices.

• Confirm that the Firefox app is running and that the “Remote Debugging via USB” setting is checked.

Connecting over the Network

You can connect to a Firefox Debug server on your network, or on your debugging machine using theNetwork Location settings of theabout:debugging page.

Enter the location and port on which the debugger server is running. When you do, it is added to the Network locations list along with the devices, as shown below:

Loading a temporary extension

With theLoad Temporary Add-on button you can temporarily load a WebExtension from a directory on disk. Click the button, navigate to the directory containing the add-on and select its manifest file. The temporary extension is then displayed under theTemporary Extensions header.

You don’t have to package or sign the extension before loading it, and it stays installed until you restart Firefox.

The major advantages of this method, compared with installing an add-on from an XPI, are:

• You don’t have to rebuild an XPI and reinstall when you change the add-on’s code;

• You can load an add-on without signing it and without needing to disable signing.

Once you have loaded a temporary extension, you can see information about it and perform operations on it.

You can use the following buttons:

Inspect

Loads the extension in the debugger.

Reload

Reloads the temporary extension. This is handy when you have made changes to the extension.

Remove

Unloads the temporary extension.

Other information about the extension is displayed:

Location

The location of the extension’s source code on your local system.

Extension ID

The temporary ID assigned to the extension.

Internal UUID

The internal UUID assigned to the extension.

Manifest URL

If you click the link, the manifest for this extension is loaded in a new tab.

Updating a temporary extension

If you install an extension in this way, what happens when you update the extension?

• If you change files that are loaded on demand, likecontent scripts orpopups, then changes you make are picked up automatically, and you’ll see them the next time the content script is loaded or the popup is shown.

• For other changes, click theReload button. This does what it says:

  • Reloads any persistent scripts, such asbackground scripts

  • Parses themanifest.json file again, so changes topermissions,content_scripts,browser_action or any other keys take effect

Installed Extensions

The permanently installed extensions are listed in the next section,Extensions. For each one, you see something like the following:

TheInspect button, and theExtension ID andInternal UUID fields are the same as for temporary extensions.

Just as it does with temporarily loaded extensions, the link next toManifest URL opens the loaded manifest in a new tab.

The Add-ons section inabout:debugging lists all WebExtensions that are currently installed. Next to each entry is a button labeledInspect.

If you clickInspect, the Add-on Debugger will start in a new tab.

Service worker state

The list of service workers shows the state of the service worker in itslifecycle. Three states are possible:

• Registering: this covers all states between the service worker’s initial registration, and its assuming control of pages. That is, it subsumes theinstalling,activating, andwaiting states.

• Running: the service worker is currently running. It’s installed and activated, and is currently handling events.

• Stopped: the service worker is installed and activated, but has been terminated after being idle.

This section uses a simple ServiceWorker demo, hosted athttps://serviceworke.rs/push-simple/.

Unregistering service workers

Click theUnregister button to unregister the service worker.

Sending push events to service workers

To debug push notifications, you can set a breakpoint in thepush event listener. However, you can also debug push notifications locally, without needing the server. Click thePush button to send a push event to the service worker.

Service workers not compatible

A warning message is displayed at the top of theThis Firefox tab if service workers are incompatible with the current browser configuration, and therefore cannot be used or debugged.

Service workers can be unavailable if:

• dom.serviceWorkers.enable preference is set to false inabout:config.

• browser.privatebrowsing.autostart preference is set to true inabout:config or through Firefox preferences UI.

Thebrowser.privatebrowsing.autostart preference is set to true if the user selectsNever remember history option or enablesAlways use private browsing mode in preferences UI, seeabout:preferences#privacy

Always use private browsing mode:

Never remember history: