mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
efe78d5565
Angular DevTools depends on many modern Angular features in order to function. As a result, at present the last officially supported version is v12. Angular DevTools may function for some Angular 9, 10 and 11 applications, but they are not officially supported. This commit fixes an issue where DevTools would not inject a backend script into an Angular application if it detected it was below version 12. This backend script is important because it's used to inform the DevTools panel that the inspected application is in fact Angular, but that it is not on a supported version. Angular 9, 10 and 11 applications that successfully have Angular DevTools initialize will now have a red highlight and tooltip on their version number, informing the user that they are using Angular DevTools on a version of Angular that is no longer supported. Angular DevTools for applications that are below version 9 will continue to display the "Angular Devtools supports Angular versions 12 and above" message. PR Close #55233
108 lines
3.6 KiB
HTML
108 lines
3.6 KiB
HTML
<nav class="devtools-nav" #navBar mat-tab-nav-bar [color]="'accent'" [tabPanel]="tabPanel">
|
|
<div id="nav-buttons">
|
|
<button (click)="toggleInspector()" matTooltip="Inspect element">
|
|
<mat-icon [class.inspector-active]="inspectorRunning"> pin_end </mat-icon>
|
|
</button>
|
|
<button [matMenuTriggerFor]="menu" matTooltip="Open settings">
|
|
<mat-icon> settings </mat-icon>
|
|
</button>
|
|
<button [matMenuTriggerFor]="info" matTooltip="Info">
|
|
<mat-icon> info </mat-icon>
|
|
</button>
|
|
</div>
|
|
|
|
<select matTooltip="Select a frame to inspect with Angular Devtools" class="frame-selector" (change)="emitSelectedFrame($event.target.value)">
|
|
@for (frame of frameManager.frames; track frame.id) {
|
|
<option [value]="frame.id" [selected]="frameManager.isSelectedFrame(frame)">
|
|
@if (frame.id === TOP_LEVEL_FRAME_ID) {
|
|
top
|
|
} @else {
|
|
{{ frame.name }} ({{ frame.id }})
|
|
}
|
|
</option>
|
|
} @empty {
|
|
<option value="0" selected>top</option>
|
|
}
|
|
</select>
|
|
|
|
@for (tab of tabs; track $index) {
|
|
<a class="mat-tab-link" mat-tab-link (click)="changeTab(tab)" [active]="activeTab === tab">
|
|
{{ tab }}
|
|
</a>
|
|
}
|
|
@if (angularVersion()) {
|
|
<section id="app-angular-version">
|
|
Angular version:
|
|
|
|
@if (majorAngularVersion() > 12 || majorAngularVersion() == 0) {
|
|
<span id="version-number">
|
|
{{ angularVersion() }}
|
|
</span>
|
|
} @else {
|
|
<span
|
|
id="version-number"
|
|
matTooltip="
|
|
Angular Devtools supports Angular versions 12 and above. Some DevTools features may be available in
|
|
older versions of Angular, but it is not officially supported.
|
|
"
|
|
class="unsupported-version"
|
|
>
|
|
{{ angularVersion() }} (unsupported)
|
|
</span>
|
|
}
|
|
|
|
@if (latestSHA) {
|
|
| DevTools SHA: {{ latestSHA }}
|
|
}
|
|
</section>
|
|
}
|
|
</nav>
|
|
|
|
<mat-tab-nav-panel #tabPanel>
|
|
@if (!applicationEnvironment.frameSelectorEnabled || frameManager.selectedFrame !== null) {
|
|
<div class="tab-content">
|
|
<ng-directive-explorer
|
|
[showCommentNodes]="showCommentNodes"
|
|
[isHydrationEnabled]="isHydrationEnabled"
|
|
[class.hidden]="activeTab !== 'Components'"
|
|
(toggleInspector)="toggleInspector()"
|
|
/>
|
|
<ng-profiler [class.hidden]="activeTab !== 'Profiler'"/>
|
|
<ng-router-tree [routes]="routes" [class.hidden]="activeTab !== 'Router Tree'"/>
|
|
<ng-injector-tree [class.hidden]="activeTab !== 'Injector Tree'"/>
|
|
</div>
|
|
}
|
|
</mat-tab-nav-panel>
|
|
|
|
<mat-menu #menu="matMenu">
|
|
<div mat-menu-item disableRipple (click)="$event.stopPropagation(); toggleTimingAPI()">
|
|
<mat-slide-toggle [checked]="timingAPIEnabled">
|
|
Enable timing API
|
|
</mat-slide-toggle>
|
|
</div>
|
|
<div mat-menu-item disableRipple (click)="$event.stopPropagation(); themeService.toggleDarkMode(currentTheme === 'light-theme')">
|
|
<mat-slide-toggle [checked]="currentTheme === 'dark-theme'">
|
|
Dark Mode
|
|
</mat-slide-toggle>
|
|
</div>
|
|
<div mat-menu-item disableRipple (click)="$event.stopPropagation(); showCommentNodes = $event.checked">
|
|
<mat-slide-toggle [checked]="showCommentNodes">
|
|
Show comment nodes
|
|
</mat-slide-toggle>
|
|
</div>
|
|
</mat-menu>
|
|
|
|
<mat-menu #info="matMenu">
|
|
<a mat-menu-item href="https://angular.io/devtools" target="_blank">
|
|
<mat-icon>library_books</mat-icon>
|
|
Guide
|
|
</a>
|
|
<a mat-menu-item href="https://github.com/angular/angular" target="_blank">
|
|
<mat-icon>launch</mat-icon>
|
|
GitHub
|
|
</a>
|
|
<a mat-menu-item href="https://github.com/angular/angular/issues" target="_blank">
|
|
<mat-icon>bug_report</mat-icon>
|
|
Issues
|
|
</a>
|
|
</mat-menu>
|