# Pillar DevTools

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

![](./img/devtools.png)

## 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.