natemoo-re / stencil-inspector

Stencil Inspector

A minimal Chrome extension for debugging web components built with Stencil.

Compatibility: Stencil 0.7.0 and up

Provided inspections:

Props

• Type
• Mutable
• Connect
• Context
• Watchers
• Value (including edit for string, number and boolean props)

States

• Watchers
• Value (including edit for string, number and boolean values)

Elements

Methods

Events

Emitters
• Definition
• Flags
  • Bubbles
  • Cancelable
  • Composed
Listeners
• Definition
• Flags
  • Capture
  • Disabled
  • Passive

Lifecycle methods

Internal class members

Instructions

1. Clone the repo
2. Build the project using npm run build
3. Load unpacked extension in Chrome
4. Point to the www folder

Screenshots

Credits

• Stencil Team
• Aurelia Inspector
• Vue.js devtools
• Douglas Crockford