mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
d2d275a275
Mozilla requires add-ons to have reproducible builds and this is managed directly by human reviewers and need to understand how to build Angular DevTools correctly. This commit defines a reproducible way of building Angular DevTools which is useful for reviewers and contributers. The actual changes I made include: 1. Moving local development content into `devtools/README` (deleting `devtools/DEVELOPING.md`) and explicitly stating the Node version as well as global Yarn install to be clear about the correct way to build the extension. This should make it easier for reviewers to understand and reproduce builds. 2. Moving release instructions to a separate doc to reduce noise as well as making some minor clean ups there. I briefly considered pointing reviewers at a new `devtools/docs/reviewers.md` doc, but decided against it because I want these instructions to be maintained in a single location where contributors and reviewers use the same content. This way any changes don't miss one of these sets of users. If reviewers have trouble with this format (dev builds isn't useful to reviewers and some content is repeated from other docs for contributors) then we can consider splitting out to a separate `reviewers.md` file. But until then, I'd like to try sharing this content and see how it works out in practice. PR Close #55406
78 lines
2.5 KiB
Markdown
78 lines
2.5 KiB
Markdown
# Angular DevTools
|
|
|
|
Angular DevTools is a browser DevTools extension for debugging and profiling Angular applications.
|
|
|
|
## Developing Locally
|
|
|
|
<!-- This duplicates some general content for setting up the angular/angular repository, however it is important to
|
|
have complete instructions here for Mozilla Add-On reviewers who need to be able to reproduce Angular DevTools
|
|
builds and will use the same documentation. -->
|
|
|
|
### Set up
|
|
|
|
Follow the instructions below to set up your Angular DevTools development
|
|
environment. Note that all commands should be executed in the repository root, not
|
|
`devtools/`. All file paths are also relative to the repository root.
|
|
|
|
Debian Linux, MacOS, and Windows via WSL should build successfully. Building
|
|
natively on Windows without WSL is not supported at the moment.
|
|
|
|
To set up your development environment, first install the [correct version of Node](/.nvmrc). If you have
|
|
[`nvm`](https://github.com/nvm-sh/nvm) set up, this can be done with:
|
|
|
|
```shell
|
|
nvm install
|
|
```
|
|
|
|
Second, install [Yarn](https://classic.yarnpkg.com/en/):
|
|
|
|
```shell
|
|
npm install -g yarn@1
|
|
```
|
|
|
|
Third, install NPM dependencies:
|
|
|
|
```shell
|
|
yarn --frozen-lockfile
|
|
```
|
|
|
|
Now you should be ready to build the DevTools extension.
|
|
|
|
### Dev builds
|
|
|
|
To run the extension in development mode run:
|
|
|
|
```shell
|
|
yarn devtools:devserver
|
|
```
|
|
|
|
You can also run a standalone version of the demo app with:
|
|
|
|
```shell
|
|
yarn devtools:devserver:demo-standalone
|
|
```
|
|
|
|
This would start a development server that you can access on <http://localhost:4200>. In development, Angular DevTools
|
|
uses a "development shell." This is different from "chrome shell" in a way, that it runs the user's app in an iframe.
|
|
DevTools then communicate with the user's app via message passing.
|
|
|
|
### Release builds
|
|
|
|
You can build the release version of Angular DevTools for either Chrome or Firefox with:
|
|
|
|
```shell
|
|
yarn devtools:build:chrome
|
|
yarn devtools:build:firefox
|
|
```
|
|
|
|
Either way, the built extension will be at `dist/bin/devtools/projects/shell-browser/src/prodapp`.
|
|
|
|
#### Installation
|
|
|
|
For Chrome, you can install the extension from `dist/bin/devtools/projects/shell-browser/src/prodapp` by following the
|
|
guide from [here](https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world#load-unpacked).
|
|
|
|
For Firefox, to load the extension, you can go to the about:debugging page, click the "This Firefox" option and then
|
|
click the Load Temporary Add-on button. You'll have to select the manifest file in
|
|
`dist/bin/devtools/projects/shell-browser/src/prodapp` directly.
|
|
|