debugging + troubleshooting

I make mistakes in my code all the time, and often these mistakes mess up my VR experience in major ways.

When this happens, I have to figure out what's causing the problem. It could be a problem with the way that I've formatted my code (like missing a " or a >), or maybe I spelled something wrong.

It can be frustrating when small errors cause such big problems, but as you get more practice debugging your code, it becomes easier to fix the problems. I'm going to intentionally add a few problems to the code in my project and then show you how I would go about debugging the issues.

First, here's my project with the messed up code.

As you can tell, my VR gallery looks a little strange now. Everything but the statue has disappeared!

Here is what I would do to debug my scene.

1. Guesswork: I can sometimes make an educated guess about where the wrong code is based on the problems I see in the scene. For example, because I see my statue, I know that at least my a-scene is being created and that the A-Frame code has loaded properly in my script element. So, I can focus on what's inside my scene element. This doesn't solve the problem, but it lets me focus my efforts.
‍
2. Glitch Errors: If you're using Glitch for your project like I am (which I recommend), Glitch will give you a red error message if something isn't formatted properly. Glitch won't capture every single bug that might come up. but it will alert you about common formatting errors.  A red dot will show up next to your code if Glitch notices an issue. Take a look at this error on my Glitch project.
‍

You can hover over the red dot to get some more details about the error. Here's what that looks like:

These errors are letting me know that something is wrong with my a-sky element. When I look closely, I can see that the value for my src attribute is missing a quotations mark at the end of it. You can also check out the red squiggly underline before the closing tag for a-sky. That red underline is another sign that something isn't right, and it's letting you know where it thinks the problem is. Fix the issue by adding the quotation marks at the end of the src attribute. You'll see the red dot on Glitch disappear.

Everything should work now, right? Not so fast. Refresh your project, and you'll see we haven't entirely solved the issue yet. The sky still isn't showing up.

3. Browser Console: To get to the bottom of this, we're going to use another tool you can use to help you debug your site: the web browser itself! Web browsers have incredible tools for developers, and we're only going to look at one: the console. The console gives you a list of warnings and errors that the browser detects in your site.

To open the console, hold control-shift-j while you have your 3D site open - or any web site! A window will appear over the website with the console. You can press control-shift-j again to hide the console. I went to my project and opened the console.

Not all the errors you see in the console will cause issues with your scene, but if you aren't seeing what you expect to see, and you see a red error in the console, it's worth investigating. Let's check out the red error.

What I can tell is that something is wrong with one of the links in our code. When I look at the first line of the error, I notice that the link starts with chttps instead of what it should start with: https://. Because it's just the a-sky that still isn't showing up, I'll look at that element in my Glitch first. Sure enough, that broken link is there.

Once I fixed that and refreshed my project, it looked fine.

Also, if you see something that you don't understand and you want to explore it: Google it. There's a good chance someone online has answered your question. You can also ask your question to the online Frame Academy community on Discord!

Debugging isn't always fun, but it will make you a better coder. I try to think of it as detective work. Hopefully, now you know how to find some clues that will help you get to the bottom of issues you run into.

exploring the html of any web site

Open up the console and look at the tabs at the top of it. At the far left, you'll see an Elements Tab. You can use that tab to browse the HTML elements of any site you're visiting - seriously! If you're exploring 3D sites in the Frame Gallery and you see something interesting, this is a great way to check out the HTML of the site.

When you open up the Elements tab on a 3D site made with A-Frame, you'll see lots of HTML elements that you might not see in your own Glitch project. This is because the A-Frame code we imported in our script element automatically creates HTML elements and puts them into your scene! One of these elements is the camera, which is the essential element that allows you to look around your 3D site. Just like with the console, a lot of things in the Elements tab might not make sense to you yet - don't let that scare you away. You'll get there!

finalizing your project

Add some final touches to your 3D site and do some debugging if you run into any issues. Try opening up the console and the elements tabs to explore your project. Ask any questions you have to our online community.

See the challenge below to learn how to share your project to the Frame Academy Gallery so that others can find it, explore it, and learn from it.

Thanks for going through this project! I hope you've learned a few things. I can't wait to show you what else you can do and learn now that you've gone through these basics. We've really only scratched the surface of what you can do with A-Frame and WebXR.

If you want to see more projects and support the sustainability of Frame Academy, consider supporting Frame Academy below.