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.
Unlock the power of Bubble's debugger: Learn how to troubleshoot invisible elements and fix workflow issues in minutes!
Master custom states and workflows to create dynamic, responsive Bubble apps that actually work!
From dashboard to settings: Discover the step-by-step process to build a fully functional multi-page app in Bubble!
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
3 ways we support solopreneurs
Our team is here to help, with a combined 30+ years working for internet startips.
Learn Bubble
Explore our library of 300+ Bubble and no code tutorial videos. Watched by over 800k no coders on YouTube.
Bubble Coaching
Troubleshoot your Bubble app and build new no code features with our in house Bubble expert.
Mastery
Ready to take your SaaS idea to the next level? Join our exclusive Mastery program for personalised content & mentoring.