Embeddable Quick Hits - Debug Button
this document is transcribed from the video and therefore at times makes reference to things you can see on screen.
Video Transcript
Hi, Welcome to Embeddable Quick Hits. In this video, we're going to talk about a powerful feature in the Embeddable builder that you may not have noticed - the Debug Button. The Debug Button allows you to see what one particular chart is doing, and of course, debug it. Let's get started!
As you can see, I've got an established Embeddable dashboard here. You can follow along using any dashboard you've already built, or by creating a new one. The debug button is available on every single component. We've got a Bar Chart, a Pie Chart, and a Table, all of which are showing some basic dimensions and measures from Embeddable's sample data.
Now I'm going to click the right-hand tab at the top of the right-hand column. This is the data explorer, which shows the load data request, generated SQL, and response for every load of every component in your dashboard. This is incredibly useful but can easily get overwhelming. This is where the Debug Button comes in. I'm going to mouse over the Pie Chart, and we'll see three icons appear. The first is for editing it, the second is for removing it, and the third is for debugging it. Click the third icon, and notice that the right-hand column is instantly filtered to show only data information for that particular chart.
You can debug as many components at a time as you want, so let's mouse over the Table and click its debug icon as well. You'll see that the right-hand column adjusts to show information for both components, while leaving the Bar Chart out. You can always click the X by the name of any component to remove it from your filters.
These filters persist across data refreshes (the little circular arrow next to “Add Component” button) but will not persist if you click the trash can icon to clear the console. Your filters will also persist between Builder and Preview modes. This is especially useful if you have a chart hooked up to variables that doesn't seem to be working properly - you can switch to preview and adjust your dropdown, or date picker, or whatever is controlling the variables, but only see debugging information for the chart that's having issues.
If you want to dive deeper into the data, you can also click the controller icon on the right. This will take you to your workspace's data playground, pre-populating the options so that they match the component's settings. This will allow you to explore the SQL being generated by the component and the results delivered. If you want different results than what you're seeing, you can tweak here to get what you're looking for, and then update the component accordingly.
If you'd like more information about the debug button or the data console in Embeddable, you can check out our documentation (opens in a new tab). We've also got a Community Slack (opens in a new tab) you can join, where we're happy to answer your questions.
See you next time!