You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

987 B

Pillar DevTools

Pillar provides a Chrome DevTools extension that allows you to efficiently inspect Pillar components.

What it does

Extension has 2 modes - panel and elements sidebar.

Panel is where most of the sweet stuff is:

  • List of all Pillar elements on the page with previews
  • Highlight element on hover
  • Highlight all Pillar elements on page
  • Editable JSON representation of the element
  • Pretty side view (element name, props, flags, ShadowDOM status and HTML representation)

Sidebar available on "Elements" tab of DevTools only contains editable JSON representation (useful for quick inspection in the DOM tree).

How it does it

Pillar communicates with Dev Tools through a service object window.__PILLAR_DEVTOOLS_HOOK__ in a similar manner to React. Dev Tools extension creates this object before Pillar is loaded, and if during initialization of a component this object is present, Pillar will set metadata for Dev Tools to parse.