How to debug a Firefox add-on (extension)
Tags: webdev, extensions, browser, javascript
Published: 2023-08-17 00:31:41

## 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 for [Firefox](https://www.mozilla.org/firefox/new/) and [Firefox Deveoper Edition](https://www.mozilla.org/en-CA/firefox/developer/).

## 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](https://github.com/open-sauced/ai/assets/833231/25871029-29b0-4c49-86a3-174014e97076)

1. Scroll down to the Advanced Settings section and ensure _Enable browser chrome and add-on debugging toolboxes_ is checked.

    ![CleanShot 2023-08-07 at 22 08 32](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jqzi6ldp2t3ns7dnzc6i.png)

1. 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](https://github.com/open-sauced/ai/assets/833231/fa5a3994-2415-4ba8-a156-7b54a467016b)

    ![CleanShot 2023-08-07 at 22 10 35](https://github.com/open-sauced/ai/assets/833231/45e479cd-c8e5-4f22-b7e6-575651a5f94b)

1. Click on the cog icon to open the menu and select _Debug Add-ons_

    ![CleanShot 2023-08-07 at 22 12 16](https://github.com/open-sauced/ai/assets/833231/c7b2c5ee-f0ba-48ad-b440-ee9e747be2d5)

1. Ensure you built the extension with the changes in my branch by running `npm run build`

1. Click on the _Load Temporary Add-on.._. button

    ![CleanShot 2023-08-07 at 22 13 00](https://github.com/open-sauced/ai/assets/833231/f5aa56b3-9303-4d5b-99c4-6381fcb4c980)

1. Select the manifest file of the add-on from the OS file menu and click the _Open_ button.

    ![CleanShot 2023-08-07 at 22 14 23](https://github.com/open-sauced/ai/assets/833231/6ff9b4e7-3ca1-4201-b9d4-e72c82183e4b)

1. The extension is now ready for use.

    ![CleanShot 2023-08-07 at 22 15 24](https://github.com/open-sauced/ai/assets/833231/6c681751-ec7d-44e5-90ec-3f6cee39edfa)

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

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

    ![CleanShot 2023-08-07 at 22 16 54](https://github.com/open-sauced/ai/assets/833231/05b10da1-4a33-4090-8f30-88ca08d15bcc)

1. 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 by <a href="https://unsplash.com/@bist31?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Birger Strahl</a> on <a href="https://unsplash.com/photos/fOV7nWWIwRk?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>