How to use the Bubble debugger to find missing data

Using the Debugger to Identify Missing Data

In this Bubble tutorial video, I'm going to demonstrate how you can use the debugger bar at the bottom of your preview app to work out why a text label isn't working or data isn't being shown when you preview your app. To demonstrate that, I've got a repeating group here of a data type called vehicles, and I'm simply searching through all the vehicles and listing them in the group here.

Previewing the App and Identifying Issues

If I go into my preview and just hit refresh, I can see that three cells are being loaded in, but my text label here "parent group's vehicle maker model" is there but not visible on the page. I can use the inspect tool in the debugger, which is available by having the URL parameter debug_mode=true. You get this automatically if you click preview from the Bubble editor.

Using the Inspect Tool

I'm going to find that text label and click on it. I can see that the text is empty, and the dynamic data that I've got being pulled through to be displayed in this text label is "parent group's vehicle". Then I can see that parent group is empty.

Common Mistakes in Bubble Development

This is quite a common mistake and an easy one to make. I see it with Bubble Coaching clients I work with each week. They think, "Oh, I've got the label in, I've told it which part of my data type 'vehicles' field to display, but why is it not showing up?"

Understanding the Element Tree

That's because in the process of building out the repeating group and their table, if I just expand everything open here, you can see that my cell contains a group. This group is missing any data. We need to be passing down through the element tree from the repeating group individual vehicle into "group vehicle", and then these elements here can access that vehicle data (that single vehicle data) through "group vehicle".

Fixing the Data Source

Because group vehicle's data source is empty, that's not going to work. So I'm going to change this to "current cell's vehicle", hit refresh, and you can see now that my text labels are working.

Understanding Auto Binding

Just a quick note: remember that the fields here I've set to auto bind, and auto binding only reaches up one level. Again, auto binding is not going to work if the parent of the auto binding input is empty. Now that I've got the parent with a vehicle value as a data source, that should work.

Conclusion

There you have it - a really quick way of finding why a text label isn't showing up is to use the debug tool. You get to this by just clicking inspect and then finding the elements on your page. If you can't find the element on the page, you can always search for it here, and you might have to dip back into the editor to get the correct name for the element that you were trying to find.