rangle / angular-devtools Goto Github PK
View Code? Open in Web Editor NEWMoved to the Angular organization.
Home Page: https://github.com/angular/angular/tree/master/devtools
Moved to the Angular organization.
Home Page: https://github.com/angular/angular/tree/master/devtools
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
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.
If we do this, we'll be able to profile production applications.
Here's a repo which could be used as an example.
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
These branches will be created by Renovate only once you click their checkbox below.
These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
@angular-devkit/build-angular
, @angular/cli
)@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
)@angular/cdk
, @angular/material
)These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.
Add a flag in the frames to show how many change detection cycles we've performed per component.
How to recreate:
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
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.
Show different views - aggregated view, like the one we have today, and other views per element
Find the exact position of the element in the component tree and color it differently
Hybrid option
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.