Sandstone DevTools

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 to parse.

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:

import 'sandstone/react-devtools';

results matching ""

    No results matching ""