frame academy

Learn how to create immersive, cross-platform webxr sites.

project: create a webxr site with basic HTML

part 5: debugging, exploring, sharing

I hope you took a crack at the challenge for Part 4! The skills you practice in the challenges are the same ones you will use to build your own VR gallery.

Remember that if you have questions or anything you want to share, please post on our online community or on Twitter with the hashtag #frameacademy

In the challenge for Part 4, I added a few more text elements to my scene. Here's the code for my scene. Feel free to remix the project to edit the HTML and make it your own!

Continue on below to see how to debug and share your scene.

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.

Tip: I'll be honest: I don't understand everything that's going on in the console when I open it up. As I learn more about A-Frame, HTML, and Javascript, more of it makes sense to me all the time. As you keep learning, more of it will make sense to you too! My advice? Don't be intimidated by all of the strange looking stuff. You can figure it all out at your own pace, as you need to.

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.

challenge #5 share your webxr site to the frame Academy gallery!

Once you add some final touches to your 3D site and debug it so it looks exactly as you expect it to, I strongly encourage you to share it to the Frame Academy Gallery in the form below. The Frame Gallery is  a friendly space where we can find, explore, and learn from each other's WebXR projects.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Did you get value from this Frame Academy project? Do you want support the creation of more?

< go back to part #4
photospheres, 2D images, Text
back to frame academy home
projects, workshops, and more
move on to project 2!
adding animations to your webxr site