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

Using the Debugger to Find Missing Elements

In this Bubble tutorial video, I'm going to be demonstrating another way that you can use the debugger bar down here at the bottom of your page to work out why an element that you think should be visible is not visible on your page. 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.

Setting Up the App Structure

I've got this set up with a repeating group here of an option set called view and my options set contains dashboard, order, and settings. Then by clicking on a cell I should get my orders and my settings coming up. If I just show you on settings, I have a custom state on the page saying like 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.

Common Mistakes in Bubble App Development

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. 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.

Using the Debugger to Identify Issues

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. I can go on to page view and I can see ah it's still set to dashboard.

Debugging Workflows Step-by-Step

So with the inspector still open, I'm gonna bring it down, hit stop and then I'm gonna go step-by-step. I can see okay well let's debug my workflows now. When I click on settings, text is clicked, set state of on one page, that's my page's custom state, and I can see that the value I'm setting it 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.

Identifying and Fixing the Workflow Issue

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 and I've missed the value. 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 like 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.

Testing the Fixed Workflow

Now I've updated that you can see it's working. If we go step by step and I click on order I can see now that I'm putting orders in as my custom state view value. 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 value is view.

Conclusion: Effective Use of the Debugger

There you have it, that is yet another way of how you can use the debugger bar in Bubble to just like methodically work through why something in your app is not behaving as you expect. In this case, why something that I 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 workflow and I discovered that I've missed a key part of the workflow action to say change the custom state to this value.