@ngneat/inspector
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.1 • Public • Published

    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

    • 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:

    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

    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

    Install

    npm i @ngneat/inspector

    DownloadsWeekly Downloads

    57

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    5.42 MB

    Total Files

    83

    Last publish

    Collaborators

    • netanel-ngneat
    • itayod
    • shahar.kazaz
    • shhdharmen