https://github.com/andrew-yangy/ng-profiler
Angular Profiler for Ivy, debugging and visualization tools
https://github.com/andrew-yangy/ng-profiler
angular change-detection chrome-extension ivy
Last synced: 7 months ago
JSON representation
Angular Profiler for Ivy, debugging and visualization tools
- Host: GitHub
- URL: https://github.com/andrew-yangy/ng-profiler
- Owner: andrew-yangy
- Created: 2020-03-10T09:30:06.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T03:06:27.000Z (almost 3 years ago)
- Last Synced: 2025-03-18T10:06:50.191Z (7 months ago)
- Topics: angular, change-detection, chrome-extension, ivy
- Language: TypeScript
- Homepage:
- Size: 2.87 MB
- Stars: 30
- Watchers: 1
- Forks: 4
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular profiler
Angular Profiler is a developer tool to power-up Angular development workflow by providing a series of debugging tools.
It can be used as [Chrome Extension](https://chrome.google.com/webstore/detail/angular-profiler/ikkobdhhnnllhcmjaealbihjkahnegia)
## How it can help us having a better developing experience && building a faster application
### Visual Change Detection and Component Tree
Angular Profiler provides multiple ways to help us debugging over-triggered change detection in our Angular application.
#### 1. Highlight the components that triggered CD and indicate CD times with different colors.
#### 2. Visual detecting changes in a component tree
The component tree will show you how angular components are rendered and updated
### Inspect and change component state
Select a component in the component tree, then you can see all the states of this component in the `properties` tab.
You can update the components right away without changing your codes and waiting webpack to compile to see your changes anymore.
How awesome is that! :sunglasses:
### Try it locally
```bash
// init project and install dependences
yarn
// package plugin in watch mode
yarn watch
// package and compile devtools page app in watch mode
yarn devtool-page:build:watch
```
The above commands will generate a `dist` folder that you can upload to chrome extension in development mode.
1. Go to `chrome://extensions/`
2. Turn on developer mode
3. Load unpacked `dist`
4. Enjoy a better developing experience :bowtie:!
5. Don't forget to send your feedback, all kinds of contributions are welcome.