rangle / angular-devtools Goto Github PK

In the individual profile frames, together with the flamegraph and treemap views, we can show a bar chart view, where we order the components by time spent.

For example:

[###### 15ms #####] NgForOf
[### 10ms ###] AppComponent
[## 5ms ##] BarComponent

The format of the information in the right sidebar could definitely be improved. I'd suggest waiting for mocks first, but we can brainstorm on what's the best way to visualize it. Maybe a pie chart?

Currently the chrome extension fails when there's no global ng object. We should check if it is available before trying to access it.

For non-Angular apps we should output a message saying the app is not using the Angular framework.

For Angular apps using old version of the framework we should be explicit that we only support Ivy with v9+.

For v9 apps running in production we should warn that we currently support only apps running in dev mode. Notice in this case that the app can be running either VE or Ivy. I don't see a good reason to be specific and distinguish between the two.

Currently, there's a chance to be left in an inconsistent state. Later on, we can consider better experience.

Instead of using a slider, show the captured change detection cycles in a bar chart. Each bar should have width relative to its width. If we've spent 1ms in the first change detection cycle and 20ms in the second one, we need to show the first bar 1/20th of the second one.

Together with the current flamegraph view, add an option to switch to treemap visualization. There each rectangle should have area relative to the time spent in change detection/life cycle hook execution.

As discussed in #127 there was an else case in initChangeDetection() that informed the UI of the error state of the application. This was removed in #111 because it was causing errors in some app initializations.

I'm opening this issue so we can discuss alternate solutions.

@mgechev
@sumitarora

• Similar to Augury look at the website and showing if it's Angular app or not
• Also check implementation of React Devtools

If we do this, we'll be able to profile production applications.

Here's a repo which could be used as an example.

There's a slight flickering of the UI when there are matching results in the component tree for given search query.

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

File: renovate.json
Error type: The renovate configuration file contains some invalid settings
Message: packageRules: You have included an unsupported manager in a package rule. Your list: yarn. Supported managers are: (ansible, ansible-galaxy, bazel, buildkite, bundler, cargo, cdnurl, circleci, cocoapods, composer, deps-edn, docker-compose, dockerfile, droneci, git-submodules, github-actions, gitlabci, gitlabci-include, gomod, gradle, gradle-wrapper, helm-requirements, helm-values, helmfile, homebrew, html, kubernetes, kustomize, leiningen, maven, meteor, mix, npm, nuget, nvm, pip_requirements, pip_setup, pipenv, poetry, pub, regex, ruby-version, sbt, swift, terraform, travis).

This issue provides visibility into Renovate updates and their statuses. Learn more

Pending Approval

These branches will be created by Renovate only once you click their checkbox below.

• build(deps): update dependency typescript to ~4.5.0

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• build(deps): update angular-cli to 767febd (@angular-devkit/build-angular, @angular/cli)
• build(deps): update angular-framework to 26d3907 (@angular/animations, @angular/common, @angular/compiler, @angular/compiler-cli, @angular/core, @angular/elements, @angular/forms, @angular/language-service, @angular/platform-browser, @angular/platform-browser-dynamic, @angular/router)
• build(deps): update dependency @types/chrome to ^0.0.175
• build(deps): update dependency ngx-flamegraph to v0.0.11
• build(deps): update dependency @types/jasmine to ~3.10.0
• build(deps): update dependency karma-coverage to ~2.1.0
• build(deps): update dependency ts-node to ~10.4.0
• build(deps): update dependency webpack to v5.65.0
• build(deps): update angular-components to v13 (@angular/cdk, @angular/material)
• build(deps): update dependency cypress to v9
• build(deps): update dependency jasmine-core to v4
• build(deps): update dependency ng-packagr to v13
• build(deps): update dependency ngx-build-plus to v13
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• build(deps): update dependency d3 to v7
• build(deps): update dependency husky to v7
• build(deps): update dependency rxjs to v7

• Check this box to trigger a request for Renovate to run again on this repository

• Edit of inputs/outputs/state
• On updating new state should be reflected on UI

Add a flag in the frames to show how many change detection cycles we've performed per component.

How to recreate:

1. Open chrome dev tools
2. Open Angular dev tools tab
3. Inspect extension frame to view extension console
4. Click the refresh button on the top left of the Angular dev tools
5. Note how many messages the extension frame console logs
6. Close chrome dev tools
7. Open chrome dev tools again without refreshing the page
8. Repeat steps 2-5
9. Note that the number of messages logged increases every time you repeat steps 6-8

Currently, our chart is a bit confusing. DevTools does not properly visualize the component hierarchy, since we don't show the nested child components right below the parent but instead, they take the entire space.

A better way to show the graph is to use a flame chart similar to this one.

In large component trees (not sure what's the pattern yet), the component explorer shows components that no longer exist in the tree.

In such cases, we get runtime errors when we try to access the props of such components or we move mouse' cursor over them.

Currently, we cannot detect how long does it take for an output to execute.

We can hold this off until our designer completes the mocks.

This way we can incrementally build the persistent data structure

The breadcrumbs are sometimes hiding the last row.

We can hold this off for when our designer completes the mocks.

We should be able to export to JSON files and import form JSON files. The recording should contain a version so we make sure we can recognize the format.

Currently, we visualize the individual elements as nodes which are siblings of the root component of the app. It makes sense logically, but practically it might not be ideal.

Two potential options for profiler.

1. Show different views - aggregated view, like the one we have today, and other views per element

2. Find the exact position of the element in the component tree and color it differently

3. Hybrid option

4. makes most sense, but there will be an overhead, finding where in the component tree the element resides.

For now, I'll go ahead and implement the hybrid option.

Currently, when scroll down I don't see the search bar.