Introduction to testing and debugging
This section covers general advice for testing and debugging your app
First, let's spend some time to define the different terms included as you prepare your app for live users:
Testing is the process of trying out the different steps of your application to check that it works as expected. It doesn't have to mean something wrong, but if there is, testing is meant to uncover it.
Debugging is done when you've observed a non-expected behavior. It's the process of understanding the root cause of the issue so that you can rectify it.
This introductory guide will give you some general advice on how to test and debug your app, before we move on to the tools that Bubble offers.
The Development environment and Live environment
Every Bubble app consists of two : Development and Live. Development is a fully functioning version of your app that you (and your team) can work in together to see exactly what the finished app will look live. Live is the app that your users see.
The two environments have database that operate completely independently of each other. In other words, in the Development environments you can make changes to your database that have no effect on your live app, making it a completely safe environment to experiment in whichever way you need to.
You should always aim to fully complete testing and debugging before deploying your app to Live.
Testing
Plan your testing and break it into pieces
Testing is all about using your app as your users would, and working systematically through all pages and features to identify issues. While this guide will not outline what a systematic approach should look like (everyone works differently), we will still encourage you to be mindful of how you organize your testing.
Keep notes
If you are testing something and see an issue elsewhere, take a note for later and stay focused on the task at hand. Letting your focus drift from place to place is an easy way to miss things, so remember to stick to the plan, but note down anything else you see.
Add test data
An app with no data in it and an app with lots of data can behave very differently. Adding test data can help you identify issues related to design, performance and security.
Test on different screen resolutions and devices
If your app is going to be used on different screens and devices, it's a good practice to test it on different resolutions and maybe even throttling the connection speed and CPU. Chrome Developer tools offers a highly useful that lets you do all of these things.
Test as different users
As you introduce privacy rules and conditions, your users will start to experience the app differently. Some users may have access to specific parts of your database and app, while others don't. In these cases it's useful to make a habit of testing your app as different users.
For example, if you have two user types, user and admin, it's likely that one has a different access level than the other, and you may miss issues or inconsistencies if you only test as one of them.
How to test the app as another user
To use your app as a specific user, simply search for that user in the built-in database editor and click Run as.
Debugging
Make sure you can reproduce it
As you keep testing your app, you will uncover the occasional issue – don't worry, it happens even to the most experienced developers!
When beginning to debug an issue, the key initial step is to establish a consistent and predictable method for reproducing it. In practice, this involves retracing your steps and running multiple tests to confirm that the issue consistently appears every time, and with the same characteristics.
This lets you get a firm grasp of the problem before you spend time tackling it.
Stay systematic and break it down
Each issue you find may have more than one cause. As you identify it or them, stay focused on one at a time. It can be useful to find ways to test that the cause you're currently working on is fixed before moving on to the next. Again, keep notes to make sure you don't miss anything.
Remember privacy rules
Many issues are related to data being unavailable because of privacy rules. Keep in mind that they apply everywhere (elements, workflows and conditions), so it's often a good idea to check the rules for the relevant data type.
Collect information
If the error has been reported by one of your users, you should try to collect as much information as you can about the circumstances that produced the error.
Which user is it?
What kind of device and browser are they using?
Are they using ad blockers or script blockers of any kind?
What were the exact steps they took to produce the issue?
Can it be reliably reproduced, or could it be because of a poor connection or other external reason?
Reach out to the community
Bubble has an incredibly welcoming and helpful community. If you ever find yourself stuck on an issue, don't hesitate to seek help! Share your problem on the Bubble forum, reach out to our Success Team, or hire one of our expert coaches to assist you in resolving it.
Take a break!
Sometime issues are best solved on a walk outside, in the shower or lying on the couch. Other times you simply need some time to refresh your mind before returning to the screen and continuing the search.
Your brain is a muscle – it too needs rest between the sessions!
Testing & debugging tools
Bubble offers two ways to debug issues, each serving a specific purpose:
Using safe modes
Safe modes is a way to preview your app, but disabling certain parts for debugging purposes:
HTML - this disables on-page HTML elements
Community plugins - this disables community-made plugins
If the issue resolves itself in Safe mode, you'll know it is due to something introduced by a plugin or custom code.
How to enable Safe mode
You enable Safe mode by holding the mouse button on the Preview button for one second. A dropdown will show you the list of options.
Last updated
