4930ed3fed
Angular DevTools now supports mutating objects underneath signals in the property explorer view.
This is done by performing an "immutable update" by recursively copying objects underneath a signal and overwriting the one property specified. For example, if the user attempted to set `foo.bar.baz[2].hello = 'world'` and `bar` was a signal, this would effectively become:
```typescript
foo.bar.set({
...foo.bar(),
baz: [
...foo.bar().baz.slice(0, 2),
{
...foo.bar().baz[2],
hello: 'world',
},
...foo.bar().baz.slice(3),
],
})
```
The motivation for immutable updates is because signals and Angular change detection don't really like interior mutability of signal values. If we didn't do this, any kind of comparison or dirty check would prevent the UI from updating. If an application attempts to change a deeply nested property inside a signal, it doesn't work today. DevTools should generally be limited to operations an application could do itself, and the recommended approach to make such a change like this is an immutable update. Creating entirely new objects intentionally breaks referential equality such that the application can properly react to the change.
Unfortunately, it is not possible to make immutable updates in a truly generic sense. You can't just copy a class for instance `({...new MyFoo()}).doSomething()`. We could do something fancier like manually copying over the prototype or something like that, but there is no way to do this without breaking class semantics (ex. the class might reasonably rely on the constructor being called). Therefore we instead reject any mutations to non-primitive objects. In the future, we might expand the set of "primitives" to include other built-ins and well-known objects like `URL` or `Element`, but those are out of scope for now.
I opted to ban mutating the result of a readonly/computed signal. While the mutation is likely to succeed, a subsequent rerun of the `computed` will immediately drop the change. However, I opted to allow mutating the result of a getter property. This has a similar problem because it might be returning a synthetic object which will be invalidated on the next execution, but it is possible and reasonable for a getter to return the same object multiple times such that a mutation may reasonably survive other updates. DevTools can't easily know whether a getter actually will return the same object on each execution or not, so we optimistically assume the reference is stable. If it isn't, the mutation will be lost whenever the getter is re-executed.
PR Close #60381
|
||
|---|---|---|
| .. | ||
| cypress | ||
| docs | ||
| projects | ||
| src | ||
| tools | ||
| .gitignore | ||
| BUILD.bazel | ||
| cypress.json | ||
| packages.bzl | ||
| README.md | ||
| tsconfig.json | ||
| tsconfig.spec.json | ||
| tslint.json | ||
Angular DevTools
Angular DevTools is a browser DevTools extension for debugging and profiling Angular applications.
Developing Locally
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. If you have
nvm set up, this can be done with:
nvm install
Second, install Yarn:
npm install -g yarn@1
Third, install NPM dependencies:
yarn --frozen-lockfile
Now you should be ready to build the DevTools extension.
Dev builds
To run the extension in development mode run:
yarn devtools:devserver
You can also run a standalone version of the demo app with:
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:
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.
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.