Need help with inspector?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

ngneat
185 Stars 1 Forks MIT License 143 Commits 2 Opened issues

Description

🕵️ An angular library that lets you inspect and change Angular component properties

Services available

!
?

Need anything else?

Contributors list

inspector logo


MIT commitizen PRs styled with prettier All Contributors ngneat spectator

An angular library that lets you inspect and change Angular 9+ component properties

Inspector demo

Features <!-- omit in toc -->

  • ✅ 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 <!-- omit in toc -->

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:

  1. Add and install following dev dependencies:
    1. @ngneat/inspector
    2. ace-builds
    3. tinykeys
  2. Import
    environments
    from
    ../environments/environment.ts
    in projects root module. This can be skipped with
    --skipImport
    .
  3. Import
    InspectorModule
    from
    @ngneat/inspector
    in your project's root module's
    imports
    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

  1. Click on Inspector button inspector button
  2. Then hover over the component which you want to inspect, you will see purple colored outline on the currently hovered element
    purple outline
  3. Click on the element and inspector will expand with component's details like name, selector, properties (with inputs), and outputs (if any)
    expanded inspector
  4. You can change the property/outputs from select
    select property
  5. Data types: Below are the supported data types and how it will render in inspector:
    1. String - input[type=text]
      string data type
    2. Number - input[type=text]
      number data type
    3. Boolean - input[type=checkbox]
      boolean data type
    4. Object - ace-editor
      object data type
  6. Properties - To update any property, after updating value, you will need to click on
    Update
    button to see the effect
    update button
  7. Outputs
    output
    1. To call the output, you will need to click on
      Emit
      button.
    2. By default, 1 argument with string type will be shown. You can change the type by change value from type select.
    3. You can also add/remove arguments by clicking on respective buttons <!-- markdownlint-restore -->

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 inspector
Default 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):


Dharmen Shah

💻 🖋 🤔 🚧

Netanel Basal

🐛 🖋 📖 🤔 🧑‍🏫

This project follows the all-contributors specification. Contributions of any kind welcome!


Icons made by Freepik from www.flaticon.com

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.