
How to debug a Firefox add-on (extension)
Before we get started
Firefox supports browser extensions like Chromium-based browsers (Chrome, Arc, Brave, Edge etc.). Sometimes they’re referred to as add-ons in Firefox land.
This post assumes that you are debugging a browser extension you are building, i.e. have the source code for and can build it locally.
It’s also assumed that the Firefox add-on has been built, i.e. generated the files, including a manifest for the add-on to work.
The following instructions work forFirefox andFirefox Deveoper Edition.
Setup Firefox for debugging an add-on
Open the browser DevTools and click on the three dots button, then select settings.
Scroll down to the Advanced Settings section and ensureEnable browser chrome and add-on debugging toolboxes is checked.
Load the add-on by clicking on the puzzle icon in the top right of Firefox or via the application menu,Tools -> Add-ons and Themes
Click on the cog icon to open the menu and selectDebug Add-ons
Ensure you built the extension with the changes in my branch by running
npm run build
Click on theLoad Temporary Add-on... button
Select the manifest file of the add-on from the OS file menu and click theOpen button.
The extension is now ready for use.
Navigate to a page where you’re using your extension.
If you want to debug or inspect the extension, click theInspect button from the Temporary Extensions section where the extension was just loaded.
You now have access to all the same browser dev tools you’re used to for debugging a web site, i.e. Inspect Element, CSS styles inspector, JavaScript debugger, etc.
And that’s it!
Photo byBirger Strahl onUnsplash
Other places you can find me at:
🎬YouTube
🎬Twitch
🎬nickyt.live
💻GitHub
👾My Discord
🐦Twitter/X
🧵Threads
🎙My Podcast
🗞️One Tip a Week Newsletter
🌐My Website
Top comments(6)

You are gentleman and a scholar

- Email
- LocationMontréal, Québec, Canada
- EducationUniversity of New Brunswick
- PronounsHe/Him
- WorkDeveloper Advocate at Pomerium
- Joined

- Email
- LocationMontréal, Québec, Canada
- EducationUniversity of New Brunswick
- PronounsHe/Him
- WorkDeveloper Advocate at Pomerium
- Joined
It’s not too bad. I’m in Chromium based browsers more often, but Firefox has comparable developer tools for web dev including browser extensions.

- LocationAccra
- EducationKwame Nkrumah University Of Science and Technology
- Joined
This is great.
Check this out.github.com/doc-han/xtensio
For further actions, you may consider blocking this person and/orreporting abuse