Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

How to use the Bubble.io debugger to find missing elements

In this Bubble.io tutorial we demonstrate how to use the Bubble Debugger bar to debug why an element is not visible when it should be. First we check the page element on the Bubble app page with the Inspect tool and element search, then we run our Workflow using Step by Step.

And so I've got a simple one page app here. And the aim of my app is that when I click on different sections, so orders or settings, I should see a change in my page here. And the way I've got this set up is I've got a repeating group here of an option set called View.

And my option set contains dashboard order and settings. And then by clicking on a cell, I should get my orders and my settings coming up. And if I just show you on settings, I have a custom state on the page saying the page is view, that's my option set from the repeating group here is settings, make this visible. But as you can see, when I click on settings, nothing is happening. Now this is an oversimplification, but it's still a very common mistake that I see in the Bubble coaching that I do week to week, day to day with other Bubble app creators.

And that is that basically we've missed something. And so we can use the debugger to work out where exactly we're missing a step. So to begin with, I'm going to open up Inspect and search for settings. I can now hone in on the settings group. Even though it's not visible on my page, I can look it up and I can see that current page view is settings. The condition isn't activated, and so that's why it's not visible. And so I can go on to page view and I can see it's still set to dashboard. Actually, with the inspector still open, I'm going to bring it down, hit stop, and then I'm going to go step by step. I can see, okay, right, let's debug my workflows now. So when I click on settings, text is clicked, set state of on one page, that's my pages custom state, and I can see that the value I'm setting is empty. That's why it's not changing from dashboard to settings because the workflow of clicking on settings isn't actually changing the custom state value. So I think I've narrowed it down to my workflow then, which is to go on to my when current cell's view is clicked, set custom state R, and I've missed the value.

And so I can change this instead to current cell's view because I'm using a repeating group to go through each of the different views I've got on my dashboard. I'm not just wanting to hard code in settings. I'm saying current cell's view so that then I only need one workflow for each of my menu items here. So now I've updated that. You can see it's working. If we go step by step and I click on order, you can see now that I'm putting orders in as my custom state view value. And if I click on settings, run it, and then go on to inspect settings, we can see that it is now visible. The condition is active condition one, and that is because as we can see, my custom state's value is view.

So there you have it. That is yet another way of how you can use the debugger bar in Bubble to just methodically work through why something in your app is not behaving as you expect it. In this case, why something that I would have thought should be visible on my page was not visible. I used the debugger bar to first check the element on the conditions, and then I narrowed it down to my work order flow, and I discovered that I had missed a key part of the workflow action to say change the custom state to this value.

Latest videos

menu