Sandstone provides a Chrome DevTools extension that allows you to efficiently inspect Sandstone components.
What it does
Extension has 2 modes - panel and elements sidebar.
Panel is where most of the sweet stuff is:
- List of all Sandstone elements on the page with previews
- Highlight element on hover
- Highlight all Sandstone 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
Sandstone communicates with Dev Tools through a service object
window.__SANDSTONE_DEVTOOLS_HOOK__ in a
similar manner to React. Dev Tools extension creates this object before Sandstone is loaded, and if
during initialization of a component this object is present, Sandstone will set metadata for Dev Tools
React Devtools integration
Sandstone also provides partial integration with React devtools, but it needs to be explicitly enabled. To do so, just import
sandstone/react-devtools in your app: