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.
29 lines
987 B
29 lines
987 B
8 years ago
|
# 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.
|