Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for How to debug a Firefox add-on (extension)
Nick Taylor
Nick TaylorSubscriber

Posted on • Edited on • Originally published atnickyt.co

     

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

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

    CleanShot 2023-08-07 at 22 06 39

  2. Scroll down to the Advanced Settings section and ensureEnable 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 in the top right of Firefox or via the application menu,Tools -> Add-ons and Themes

    CleanShot 2023-08-07 at 22 11 39

    CleanShot 2023-08-07 at 22 10 35

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

    CleanShot 2023-08-07 at 22 12 16

  5. Ensure you built the extension with the changes in my branch by runningnpm run build

  6. Click on theLoad Temporary Add-on... button

    CleanShot 2023-08-07 at 22 13 00

  7. Select the manifest file of the add-on from the OS file menu and click theOpen button.

    CleanShot 2023-08-07 at 22 14 23

  8. The extension is now ready for use.

    CleanShot 2023-08-07 at 22 15 24

  9. Navigate to a page where you’re using your extension.

  10. If you want to debug or inspect the extension, click theInspect button from the Temporary Extensions section where the extension was just loaded.

    CleanShot 2023-08-07 at 22 16 54

  11. 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)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
bdougieyo profile image
Brian Douglas
Brian writes code
  • Location
    Oakland, CA
  • Pronouns
    he/him
  • Work
    Head of DX
  • Joined

You are gentleman and a scholar

CollapseExpand
 
nickytonline profile image
Nick Taylor
I'm a fan of Open Source and have a growing interest in serverless and edge computing. I'm not a big fan of spiders, but they're doing good work eating bugs. I also stream on Twitch.
  • Email
  • Location
    Montréal, Québec, Canada
  • Education
    University of New Brunswick
  • Pronouns
    He/Him
  • Work
    Developer Advocate at Pomerium
  • Joined

Captain America saluting

CollapseExpand
 
fyodorio profile image
Fyodor
Why'd you (software engineers) have to go and make things (software development) so complicated...
  • Location
    Backwoods
  • Education
    MSc, Royal Holloway University of London
  • Work
    Product Engineer
  • Joined

How do you like the experience as compared to debugging extensions in Chrome?

CollapseExpand
 
nickytonline profile image
Nick Taylor
I'm a fan of Open Source and have a growing interest in serverless and edge computing. I'm not a big fan of spiders, but they're doing good work eating bugs. I also stream on Twitch.
  • Email
  • Location
    Montréal, Québec, Canada
  • Education
    University of New Brunswick
  • Pronouns
    He/Him
  • Work
    Developer 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.

CollapseExpand
 
dochan profile image
Farhan Yahya
I'm a passionate programmer aspiring to be a very good computer scientist
  • Location
    Accra
  • Education
    Kwame Nkrumah University Of Science and Technology
  • Joined

This is great.
Check this out.github.com/doc-han/xtensio

CollapseExpand
 
aster profile image
ger
  • Joined

How do I view the source code (CSS) of a FireFox extension that I didn't build? One that I downloaded form the add-on store for FireFox.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

I'm a fan of Open Source and have a growing interest in serverless and edge computing. I'm not a big fan of spiders, but they're doing good work eating bugs. I also stream on Twitch.
  • Location
    Montréal, Québec, Canada
  • Education
    University of New Brunswick
  • Pronouns
    He/Him
  • Work
    Developer Advocate at Pomerium
  • Joined

More fromNick Taylor

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp