about:debugging – Firefox Developer Instruments

The about:debugging web page supplies a single place from which you’ll be able to connect the Firefox Developer Instruments to quite a lot of debugging targets. In the mean time it helps three primary kinds of targets: restartless add-ons, tabs, and staff.

There are two methods to open about:debugging:

  • Kind about:debugging within the Firefox URL bar.
  • Within the Instruments > Internet Developer menu, click on Distant Debugging.

When about:debugging opens, on the left-hand aspect, you will see a sidebar with two choices and details about your distant debugging setup:

Use the Setup tab to configure the connection to your distant system.
This Firefox
Gives details about short-term extensions you’ve got loaded for debugging, extensions which might be put in in Firefox, the tabs that you simply presently have open, and repair staff operating on Firefox.

In case your about:debugging web page is totally different from the one displayed right here, go to about:config, discover and set the choice devtools.aboutdebugging.new-enabled to true.

Connecting to a distant system

Firefox helps debugging over USB with Android units, utilizing the about:debugging web page.

Earlier than you join:

  1. Allow Developer settings in your Android system.
  2. Allow USB debugging within the Android Developer settings.
  3. Allow Distant Debugging through USB within the Superior Settings in Firefox on the Android system.
  4. Join the Android system to your pc utilizing a USB cable.

In case your system would not seem within the lefthand aspect of the about:debugging web page, strive clicking the Refresh units button.

If it nonetheless would not seem, it could be as a result of the hyperlink between your Android system and your pc just isn’t approved but. First ensure you have put in Android Debug Bridge from Android Instruments in your pc to ensure that it to have the ability to hook up with your system. Subsequent, disable each debugging setting already activated and repeat the steps described earlier than. Your system ought to present a popup to authorize your pc to hook up with it — settle for this after which click on the Refresh units button once more. The system ought to seem.

Be aware: You do not want to put in the complete Android Studio SDK. Solely adb is required.

To begin a debugging session, first open the web page that you simply want to debug after which click on Join subsequent to the system title to open a connection to it. If the connection was profitable, now you can click on the title of the system to change to a tab with details about the system.

Screenshot of the debugging page for an Android device

The data on this web page is similar as the data on the This Firefox tab, however as an alternative of displaying info in your pc, it shows the data for the distant system with the addition of a Tabs part with an entry for every of the tabs open on the distant system.

Be aware: If the model of Firefox in your distant system is a couple of main model older than the model operating in your pc, you may even see a message like the next:

The connected browser has an old version (68.2.0). The minimum supported version (69.0a1). This is an unsupported setup and may cause DevTools to fail. Please update the connected browser.

In Firefox 76 and above, the message can appear to be the next:

This version of Firefox cannot debug Firefox for Android (68). We recommend installing Firefox for Android Nightly on your phone for testing. More details

See Connection for Firefox for Android 68 for extra info.

Within the picture above, there are three tabs open: Community or cache Recipe, Nightly Residence, and About Nightly. To debug the contents of one among these tabs, click on the Examine button subsequent to its title. If you do, the Developer Instruments open in a brand new tab.

Screenshot showing the remote debugging window, with the editable URL bar

Above the standard record of instruments, you’ll be able to see details about the system you might be linked to, together with the truth that you might be linked (on this instance) through USB, to Firefox Preview, on a Pixel 2, in addition to the title of the web page that you’re debugging, and the tackle of the web page.

Beginning in Firefox 78, the URL bar is editable, so as to change the URL utilized by the browser on the distant system, by typing in Firefox for Desktop. You can even reload the web page by clicking the Reload button subsequent to the URL bar, and (beginning 79), navigate backward or ahead within the looking historical past with the Again and Ahead buttons.

Connecting over the Community

You possibly can hook up with a Firefox Debug server in your community, or in your debugging machine utilizing the Community Location settings of the about:debugging web page.

Enter the placement and port on which the debugger server is operating. If you do, it’s added to the Community places record together with the units, as proven beneath:

The This Firefox tab combines the options of Extensions, Tabs, and Staff right into a single tab with the next sections:

Momentary Extensions
Shows a listing of the extensions that you’ve got loaded utilizing the Load Momentary Add-on button.
This part lists details about the extensions that you’ve got put in in your system.
Service Staff, Shared Staff, and Different Staff
There are three sections on this web page that take care of Service Staff, Shared Staff, and Different Staff.

Whether or not inside extensions seem within the record on this web page is dependent upon the setting of the devtools.aboutdebugging.showHiddenAddons desire. If you could see these extensions, navigate to about:config and be sure that the desire is about to true.

Loading a brief extension

With the Load Momentary Add-on button you’ll be able to quickly load an online extension from a listing on disk. Click on the button, navigate to the listing containing the add-on and choose its manifest file. The short-term extension is then displayed below the Momentary Extensions header.

You do not have to bundle or signal the extension earlier than loading it, and it stays put in till you restart Firefox.

The foremost benefits of this technique, in contrast with putting in an add-on from an XPI, are:

  • You do not have to rebuild an XPI and reinstall if you change the add-on’s code;
  • You possibly can load an add-on with out signing it and without having to disable signing.

After getting loaded a brief extension, you’ll be able to see details about it and carry out operations on it.

Screenshot of the debugging information panel for a temporary extension

You should utilize the next buttons:

Hundreds the extension within the debugger.
Reloads the short-term extension. That is helpful when you’ve got made modifications to the extension.
Take away
Unloads the short-term extension.

Different details about the extension is displayed:

The placement of the extension’s supply code in your native system.
Extension ID
The short-term ID assigned to the extension.
Inner UUID
The interior UUID assigned to the extension.
Manifest URL
For those who click on the hyperlink, the manifest for this extension is loaded in a brand new tab.

Updating a brief extension

For those who set up an extension on this means, what occurs if you replace the extension?

  • For those who change recordsdata which might be loaded on demand, like content material scripts or popups, then modifications you make are picked up mechanically, and you will see them the subsequent time the content material script is loaded or the popup is proven.
  • For different modifications, click on the Reload button. This does what it says:

Put in Extensions

The completely put in extensions are listed within the subsequent part, Extensions. For every one, you see one thing like the next:

Screenshot of the debugging information panel for an installed extension

The Examine button, and the Extension ID and Inner UUID fields are the identical as for short-term extensions.

Simply because it does with quickly loaded extensions, the hyperlink subsequent to Manifest URL opens the loaded manifest in a brand new tab.

Be aware: It is really helpful that you simply use the Browser Toolbox, not the Add-on Debugger, for debugging WebExtensions. See Debugging WebExtensions for all the small print.

The Add-ons part in about:debugging lists all internet extensions which might be presently put in. Subsequent to every entry is a button labeled Examine.

Be aware: This record could embrace add-ons that got here preinstalled with Firefox.

For those who click on Examine, the Add-on Debugger will begin in a brand new tab.

See the web page on the Add-on Debugger for all of the issues you are able to do with this instrument.

The Staff part reveals all the employees you have acquired registered in your Firefox, categorized as follows:

You possibly can join the developer instruments to every employee, and ship push notifications to service staff.

Service employee state

The record of service staff reveals the state of the service employee in its lifecycle. Three states are potential:

  • Registering: this covers all states between the service employee’s preliminary registration, and its assuming management of pages. That’s, it subsumes the putting in, activating, and ready states.
  • Operating: the service employee is presently operating. It is put in and activated, and is presently dealing with occasions.
  • Stopped: the service employee is put in and activated, however has been terminated after being idle.

Screenshot of the debugging panel for a service worker that is in the Running state

This part makes use of a easy ServiceWorker demo, hosted at https://serviceworke.rs/push-simple/.

Be aware: From Firefox 79 onwards, you’ll be able to entry comparable info on the Service Staff registered on a selected area by going to the Firefox DevTools Software panel.

Unregistering service staff

Click on the Unregister button to unregister the service employee.

Sending push occasions to service staff

To debug push notifications, you’ll be able to set a breakpoint within the push occasion listener. Nevertheless, you may also debug push notifications domestically, without having the server. Click on the Push button to ship a push occasion to the service employee.

Service staff not appropriate

A warning message is displayed on the prime of the This Firefox tab if service staff are incompatible with the present browser configuration, and due to this fact can’t be used or debugged.

Service staff could be unavailable if the dom.serviceWorkers.allow desire is about to false in about:config.

Releases of Firefox for Android which might be primarily based on model 68 can’t be debugged from desktop Firefox variations 69 or later, due to the distinction in launch variations. Till such time as Firefox for Android is up to date to a more recent main launch, in synch with desktop Firefox, it is best to use one of many following Firefox for Android variations:

For those who favor to check with the principle launch of Firefox for Android (i.e., primarily based on launch 68), you are able to do so with the desktop Firefox Prolonged Help Launch (ESR), which can be primarily based on model 68.

Be aware that about:debugging just isn’t enabled by default in Firefox ESR.  To allow it, open the Configuration Editor (about:config) and set devtools.aboutdebugging.new-enabled to true.

For those who used a better model of Firefox previous to putting in Firefox ESR, you’ll be prompted to create a brand new consumer profile, to be able to shield your consumer information. For extra info, see What occurs to my profile if I downgrade to a earlier model of Firefox?

Leave a Reply

Your email address will not be published. Required fields are marked *