Observe Component Behavior with Actions Addon

[00:00] We've all added console dot log statements to validate our component interfaces. With Storybook actions, that's a thing of the past. To see these actions, make sure that your add ons panel is enabled, then click on the actions tab. In these sample stories, you can just click this button and everything will get logged. Now this doesn't just work for on [00:20] click common events. Jump to header and you'll see it work with custom events as well logging on log out for this logged in story and on log in for this logged out story as well as on create account. So what's making all of this work? It's a file inside of the hidden dot [00:39] storybook directory under the name preview. Preview is a module that controls all of these stories in storybook. In here, we have configuration to look for any on prefixed event using a regex and log out the event that happened. If we disable this high level observer and click on our [00:59] buttons again, we'll see that they no longer log anything. Now this is a fairly advanced setup. I'll show you a way to do this closer to the component, but I wanna show you how to disable this in case you don't wanna see some on prefixed events. In general, this is a great way to prevent extraneous logging statements that [01:18] somehow always find their way into production code.