Commit graph

8 commits

Author SHA1 Message Date
AleksanderBodurri
ebcdc8dc96 refactor(devtools): implement multiframe support in devtools page (#53934)
In the Angular DevTools Chrome DevTools page:

- Angular DevTools is able to ask the background script to list each frame that has been registered on a page.
- Angular Devtools is able to ask the background script to "enable" the connection on a particular frame. This enables the messaging between the content script <-> background script <-> devtools page
- Implements detection of non unique urls on the inspected page

Limitations:
- The `inspectedWindow.eval` API is only able to target frames by frameURL. This means some features that integrate with Chrome DevTools like inspect element and open source will not be available when inspecting frames that do not have a unique url on the page.

PR Close #53934
2024-02-14 17:15:25 -08:00
Matthieu Riegler
b560e02cdf refactor(devtools): Add hydration informations (#53910)
This commit adds hydration informations to the devtools.
* List of hydrated/hydrated components
* Shows hydration overlays
* Shows hydration errors for NG0500, 501 & 502

PR Close #53910
2024-01-30 20:03:14 +00:00
Matthieu Riegler
8195be1e09 refactor(devtools): run control flow migration. (#53353)
Let's update the devtools with the latest improvements !

PR Close #53353
2023-12-05 17:20:09 -08:00
AleksanderBodurri
8bdbbf4510 feat(devtools): Implement initial DI debugging features in devtools (#51719)
This commit introduces 2 new features into DevTools.

Directive level dependency inspection: Users can now view which dependencies their directives have injected in the property viewer tab. This view displays not only the dependency but also the resolution path that was used to service the injection.

Injector graph inspection: Users can now view a visualization of the element and environment hierarchies in their application. These trees are displayed separately but on the same page in the Injector Tree tab. User can click on individual injectors to view a list of all the providers configured in that injector, as well as highlight the resolution path from that injector to the root (with the corresponding environment injector connection highlighted as well).

PR Close #51719
2023-10-10 13:10:50 -07:00
AleksanderBodurri
78afe889fd refactor(devtools): migrate material legacy components to mdc (#51590)
Removes all legacy angular material imports and moves devtools over to mdc.

PR Close #51590
2023-08-31 17:31:42 +00:00
Kristiyan Kostadinov
b29b95b0f8 fix(devtools): clean up menu layout (#45665)
The menus weren't using the `mat-menu` component correctly which had led to some inconsistent spacing and the need for style overrides. These changes correctly wrap the menu content in `mat-menu-item` which has the added benefit of having keyboard support. I had to keep some of the overrides in order to preserve the dense layout of the menus.

I've also cleaned up the component by:
* Removing some unnecessary styles.
* Switching single-class usages of `ngClass` to `class.` bindings.
* Not using `br` tags for spacing.

PR Close #45665
2022-04-18 09:23:13 -07:00
mgechev
bf428775a4 fix(devtools): change links to the angular repo (#44885)
Use proper reporting and source code links in the DevTools UI.

PR Close #44885
2022-02-02 15:33:17 -08:00
AleksanderBodurri
528f33d13d refactor(devtools): prepare codebase for migration to angular/angular repo 2021-11-21 20:23:18 -05:00
Renamed from projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html (Browse further)