angular/devtools/docs/firefox.md

# Installing Angular DevTools in Firefox

To install Angular DevTools in Firefox follow the steps:

* Open menu item from top bar `Tools -> Browser Tools -> Remote Debugging`.

* After clicking `Remote Debugging` click on `This Firefox` option from left navigation. You will see the below screen with list of extensions. Temporary extensions are unreleased extensions loaded in development mode.

* Click on `Load Temporary Add-on` button to select and load the Angular DevTools extension for Firefox.

* Select any file from `dist/bin/devtools/projects/shell-browser/src/prodapp` directory to load extension. If you have not built the extension for Firefox yet, you can do it using `pnpm devtools:build:firefox` which will generate build for Firefox.

* After selecting file and clicking open, you should be able to see Angular DevTools as a temporary Extension in Firefox.

* Open any Angular application in dev mode and open Firefox DevTools you should see Angular Tab in there.
docs(devtools): adding firefox development documentation (#44952) Adding DevTools documentation for Firefox. PR Close #44952 2022-02-02 19:59:56 +00:00			`# Installing Angular DevTools in Firefox`

docs(devtools): updating firefox documentation (#44952) updating typo PR Close #44952 2022-04-04 20:39:24 +00:00			`To install Angular DevTools in Firefox follow the steps:`
docs(devtools): adding firefox development documentation (#44952) Adding DevTools documentation for Firefox. PR Close #44952 2022-02-02 19:59:56 +00:00
docs(devtools): updating firefox development documentation (#44952) Updating Firefox DevTools documentation to be more descriptive and removing images. PR Close #44952 2022-02-15 17:11:36 +00:00			* Open menu item from top bar `Tools -> Browser Tools -> Remote Debugging`.
docs(devtools): adding firefox development documentation (#44952) Adding DevTools documentation for Firefox. PR Close #44952 2022-02-02 19:59:56 +00:00
docs(devtools): updating firefox development documentation (#44952) Updating Firefox DevTools documentation to be more descriptive and removing images. PR Close #44952 2022-02-15 17:11:36 +00:00			* After clicking `Remote Debugging` click on `This Firefox` option from left navigation. You will see the below screen with list of extensions. Temporary extensions are unreleased extensions loaded in development mode.
docs(devtools): adding firefox development documentation (#44952) Adding DevTools documentation for Firefox. PR Close #44952 2022-02-02 19:59:56 +00:00
docs(devtools): updating firefox development documentation (#44952) Updating Firefox DevTools documentation to be more descriptive and removing images. PR Close #44952 2022-02-15 17:11:36 +00:00			* Click on `Load Temporary Add-on` button to select and load the Angular DevTools extension for Firefox.
docs(devtools): adding firefox development documentation (#44952) Adding DevTools documentation for Firefox. PR Close #44952 2022-02-02 19:59:56 +00:00
build: use pnpm as the package manager instead of yarn (#62924) Use pnpm instead of yarn as the package manager and interaction tool for the repo PR Close #62924 2025-07-31 15:17:27 +00:00			* Select any file from `dist/bin/devtools/projects/shell-browser/src/prodapp` directory to load extension. If you have not built the extension for Firefox yet, you can do it using `pnpm devtools:build:firefox` which will generate build for Firefox.
docs(devtools): adding firefox development documentation (#44952) Adding DevTools documentation for Firefox. PR Close #44952 2022-02-02 19:59:56 +00:00
docs(devtools): updating firefox documentation (#44952) updating typo PR Close #44952 2022-04-04 20:39:24 +00:00			`* After selecting file and clicking open, you should be able to see Angular DevTools as a temporary Extension in Firefox.`
docs(devtools): adding firefox development documentation (#44952) Adding DevTools documentation for Firefox. PR Close #44952 2022-02-02 19:59:56 +00:00
docs(devtools): updating firefox development documentation (#44952) Updating Firefox DevTools documentation to be more descriptive and removing images. PR Close #44952 2022-02-15 17:11:36 +00:00			`* Open any Angular application in dev mode and open Firefox DevTools you should see Angular Tab in there.`