Manipulate the Storybook Canvas with the Addon Toolbar

[00:00] The Storybook add on toolbar provides one click access to a number of essential component debugging tools. Let's open the button primary story to see how it works. First, ensure that it's enabled by clicking the shortcut cog and toggling on Show Toolbar if it's off. When it [00:20] is enabled you'll see this handy toolbar above your component in the canvas. Let's cover them from left to right. We have a refresh to remount the component in the document. Zoom buttons to zoom in or out to see those finer details, a background control to test the versatility of your component on [00:39] light and dark backgrounds, a grid component that underlays a fixed grid. I don't find these personally useful but it's there if you need it. Something that I do use all the time is this view ports add on. With view ports, we can see how our component responds in various situations, even forcing some unflattering ones to make [00:59] sure that it doesn't break. The measure tool is everything that you would come to expect from the Chrome Dev Tools measure tool. But it has the benefit of working on a number of components so we can scan over the individual pieces of any component to see what layout's being applied. This works really nicely with the outline tool which [01:19] shows you any invisible space that a component may be taking up in the layout. Sort of like essential add ons and the add ons toolbar make it easy for developers and non developers alike to quickly inspect and debug robust user interfaces.