How to Interactively Inspect Blocks on a Store Framework Store

Styling

Prerequisites

You can only use this method on a development workspace.

How to

Access https://{workspace}--{account}.myvtex.com/path-you-want/?__inspect.
You'll be able to inspect each React element and grab information about the block.
You can see the VTEX IO app that exports this block, the block itself and block class.

Example:

{"base64":" ","img":{"width":2068,"height":1124,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":251892,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/how-to-interactively-inspect-blocks-on-a-store-framework-store-0.png"}}