This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 15k traffic Daily!!!

How to debug a Firefox add-on (extension)




Earlier than we get began

Firefox helps browser extensions like Chromium-based browsers (Chrome, Arc, Courageous, Edge and many others.). Typically they’re known as add-ons in Firefox land.

This publish assumes that you’re debugging a browser extension you’re constructing, i.e. have the supply code for and may construct it regionally.

It’s additionally assumed that the Firefox add-on has been constructed, i.e. generated the recordsdata, together with a manifest for the add-on to work.

The next directions work for Firefox and Firefox Deveoper Edition.



Setup Firefox for debugging an add-on

  1. Open the browser DevTools and click on on the three dots button, then choose settings.

    CleanShot 2023-08-07 at 22 06 39

  2. Scroll right down to the Superior Settings part and guarantee Allow browser chrome and add-on debugging toolboxes is checked.

    CleanShot 2023-08-07 at 22 08 32

  3. Load the add-on by clicking on the puzzle icon within the prime proper of Firefox or through the appliance menu, Instruments -> Add-ons and Themes

    CleanShot 2023-08-07 at 22 11 39

    CleanShot 2023-08-07 at 22 10 35

  4. Click on on the cog icon to open the menu and choose Debug Add-ons

    CleanShot 2023-08-07 at 22 12 16

  5. Make sure you constructed the extension with the adjustments in my department by working npm run construct

  6. Click on on the Load Non permanent Add-on... button

    CleanShot 2023-08-07 at 22 13 00

  7. Choose the manifest file of the add-on from the OS file menu and click on the Open button.

    CleanShot 2023-08-07 at 22 14 23

  8. The extension is now prepared to be used.

    CleanShot 2023-08-07 at 22 15 24

  9. Navigate to a GitHub web page the place you need to begin debugging the remaining points with the Firefox add-on

  10. If you wish to debug or examine the extension, click on the Examine button from the Non permanent Extensions part the place the extension was simply loaded.

    CleanShot 2023-08-07 at 22 16 54

And that’s it!

Photograph by Birger Strahl on Unsplash

The Article was Inspired from tech community site.
Contact us if this is inspired from your article and we will give you credit for it for serving the community.

This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 10k Tech related traffic daily !!!

Leave a Reply

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

Want to Contribute to us or want to have 15k+ Audience read your Article ? Or Just want to make a strong Backlink?