Skip to main content

Debugging

this follows the previous part Build your first project

Please make sure you're already familiar with debugging JavaScript using Chrome DevTools.

Now, let's debug a hypothetical situation. For some reason, your grid is not rendering, and all you get is a strange looking white plane, like this:

📷 A strange looking white plane, Aka, the 🐞:

getting-started-strange-plane

Step 1#

Open the DevTools Sources panel and locate the index.js file:

getting-started-sources-panel

Step 2#

Pause the code with a breakpoint:

getting-started-breakpoint-start

Step 3#

Step through the code until the end of the file:

getting-started-breakpoint-end

Aha! Looks like we're so thrilled about learning the Zea Engine ways, that we accidentally left an extra line at the end. It turns out the strange looking white plane is actually a very crammed grid, with 10000 subdivisions in each direction.

Step 4#

Remove or comment the problematic line. Your grid should render again:

getting-started-commented-line

getting-started-working-grid

Next steps#

Use the Basic Setup Template and follow a few Tutorials.

Learn how to load assets into your Zea Engine App; when you're done with that, view the Zea CAD docs for more advanced use cases.