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!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.