@ngneat/inspector v1.1.1
An angular library that lets you inspect and change Angular 9+ component properties
Features
- ✅ Inspect Angular 9+ components on the fly
- ✅ Change component properties without touching the code
- ✅ Simulate Angular events
- ✅ See the results in realtime
Table of Contents
Installation
This library supports Angular 9+ projects and should only be installed using Angular CLI.
Angular CLI
ng add @ngneat/inspector
Above command will do following for you:
- Add and install following dev dependencies:
- Import
environments
from../environments/environment.ts
in projects root module. This can be skipped with--skipImport
. - Import
InspectorModule
from@ngneat/inspector
in your project's root module'simports
section. This can be skipped with--skipImport
.
👉 Please note: @ngneat/inspector is a debugging tool and it helps you to develop faster. So, it shouldn't be part of your production deployment. When you install it using
ng add @ngneat/inspector
it is already taken care for you, as it writes import statement like this:imports: [environment.production ? [] : InspectorModule.forRoot()]
Usage
- Click on Inspector button
- Then hover over the component which you want to inspect, you will see purple colored outline on the currently hovered element
- Click on the element and inspector will expand with component's details like name, selector, properties (with inputs), and outputs (if any)
- You can change the property/outputs from select
- Data types: Below are the supported data types and how it will render in inspector:
- String - inputtype=text
- Number - inputtype=text
- Boolean - inputtype=checkbox
- Object - ace-editor
- Properties - To update any property, after updating value, you will need to click on
Update
button to see the effect - Outputs
- To call the output, you will need to click on
Emit
button. - By default, 1 argument with string type will be shown. You can change the type by change value from type select.
- You can also add/remove arguments by clicking on respective buttons
- To call the output, you will need to click on
Options
When you ran ng add @ngneat/inspector
, it added below statement in your imports array:
imports: [environment.production ? [] : InspectorModule.forRoot()]
Now, you can pass below config options to change inspector behavior in the .forRoot()
method, like: InspectorModule.forRoot({ zIndex: 100000000 })
.
All the options are optional.:
Option | Type | Description |
---|---|---|
enabled | boolean | Enable or disable the inspectorDefault value: true |
zIndex | number | Gives the CSS z-index to inspector host element. Useful in-case it's not visible by default.Default value: 100000000 |
outline | InspectorConfigOutline { color?: string; width?: string; style?: string; } | Applies style to outline, when you're hovering over elements after starting inspector.Default value:{ color: '#ad1fe3', width: '2px', style: 'solid' } |
position | InspectorConfigPosition { top?: string; right?: string; bottom?: string; left?: string; } | Applies CSS Style position co-ordinates to inspector host element. Please note inspector host element has position: fixed for better usability.Default value:{ top: '20px', right: '20px' } |
keyCombo | string | Key combination pattern to start, stop and restart inspecting. Based on tinykeys keybinding syntax. You can disable this by setting enableKeyCombo to false .Default value: Shift+I |
closeOnEsc | boolean | Close/Stop inspector when escape key is pressed.Default value: true |
enableKeyCombo | boolean | Enable keyboard shortcut to open inspector. You can change the keybindings using keyCombo options.Default value: true |
hideNonSupportedProps | boolean | This hides non-supported types from selector. Only string , number , boolean and object are supported as of now.Default value: true |
filterProps | RegExp | A regular expression to filter out properties.Default value: `/(^__)\w/g`* |
Contributors ✨
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
Icons made by Freepik from www.flaticon.com
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago