GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → ngneat → Inspector

ngneat / Inspector

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

Programming Languages

typescript
32286 projects

Labels

angularinspectorng

Projects that are alternatives of or similar to Inspector

Indium
A JavaScript development environment for Emacs
Stars: ✭ 1,058 (+526.04%)
Mutual labels:  inspector
Func Loc
A simple tool that helps you to retrieve the function location from its reference.
Stars: ✭ 99 (-41.42%)
Mutual labels:  inspector
Xray React
React layout debugger.
Stars: ✭ 128 (-24.26%)
Mutual labels:  inspector
Netlify Builder
Deploy your Angular app to netlify from CLI
Stars: ✭ 60 (-64.5%)
Mutual labels:  ng
Ng Spin Kit
SpinKit (http://tobiasahlin.com/spinkit/) spinners for Angular
Stars: ✭ 90 (-46.75%)
Mutual labels:  ng
Wuzz
Interactive cli tool for HTTP inspection
Stars: ✭ 9,845 (+5725.44%)
Mutual labels:  inspector
Ng Lazy Load
Lazy loading images with Angular.
Stars: ✭ 12 (-92.9%)
Mutual labels:  ng
Object Visualizer
Vue JSON inspector with Chrome-like theme.
Stars: ✭ 159 (-5.92%)
Mutual labels:  inspector
Uinspector
A UI inspector to traverse a view hierarchy on Android
Stars: ✭ 97 (-42.6%)
Mutual labels:  inspector
Code Pal For Abap
code pal for ABAP is a highly configurable engine, fully integrated into the ABAP development framework ensuring Cloud’s built-in quality.
Stars: ✭ 121 (-28.4%)
Mutual labels:  inspector
Angular Cli Webpack
Webpack configuration modifier for @angular/cli
Stars: ✭ 72 (-57.4%)
Mutual labels:  ng
Ngx Pipes
⚡️ Useful pipes for Angular with no external dependencies!
Stars: ✭ 1,252 (+640.83%)
Mutual labels:  ng
Jlsca
Side-channel toolkit in Julia
Stars: ✭ 114 (-32.54%)
Mutual labels:  inspector
Logger
Simple logger with stores inspector
Stars: ✭ 58 (-65.68%)
Mutual labels:  inspector
Magix Inspector
magix项目调试分析工具
Stars: ✭ 134 (-20.71%)
Mutual labels:  inspector
React Inspect Props
React properties inspector with the power of Redux DevTools
Stars: ✭ 31 (-81.66%)
Mutual labels:  inspector
Ngx Quill
Angular (>=2) components for the Quill Rich Text Editor
Stars: ✭ 1,382 (+717.75%)
Mutual labels:  ng
Nim
Streamline Your Node.js Debugging Workflow with Chromium (Chrome, Edge, More) DevTools.
Stars: ✭ 168 (-0.59%)
Mutual labels:  inspector
Ngx Amap
angular 2+ component for AMap (Gaode map)
Stars: ✭ 148 (-12.43%)
Mutual labels:  ng
Inspector
The Inspector tool is a privilege escalation helper (PoC), easy to deployed on web server, this tool can list process running with root, check kernel version, check history file, get possible exploit ...
Stars: ✭ 119 (-29.59%)
Mutual labels:  inspector
View All Similar Projects ➔

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

🖋 🤔 🚧 🖋 🤔 🧑‍🏫

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

Icons made by Freepik from www.flaticon.com

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].