How to debug Puzzles
This short but very important how-to explains how to find and fix bugs in your Puzzles-scripted scenarios.
Look for errors in the browser console
If your Puzzles execute incorrectly, e.g. because of passing invalid inputs, they will fail to work and print the explanation in the browser console. To open the console just press F12 and switch to the Console tab (works in most cases, if not, refer to the instructions).
Check out the following example that explains the idea. Consider you need to replace a texture on some of your models with the replace texture puzzle, but nothing happens once you run this puzzle.
Don't worry! By looking in the browser console you'll find the cause of this issue immediately:
It says you've specified an invalid path to the texture! Fix the path and reload the app to see that the issue has gone.
Use print to console puzzle
Your scenario behaves odd, but there are no errors in the browser console? Just insert the print to console puzzle in the right places and pass some meaningful data to this puzzle as input.
What places? What data?
Let's explain it with the following example. Consider you need to calculate a position with some function ("calc object position") and then place some object to this position with the set transform puzzle. Once you've done with your scenario, you see that the object is not placed correctly. What should you do first? As you can guess, you should open the browser console!
Unfortunately, there are no errors printed there:
This means you should switch to plan B and insert the print to console puzzle into your scenario. But where to? Your internal voice may suggest that you should place it just before the actual object positioning takes place and just print the coordinates variable to see they are correct.
Here we go:
By running this code we finally see that the position returned by the "calc object position" is not correct. In our specific case it has zero values for all 3 coordinates (XYZ). Now it's time to review the "calc object position" and check for possible errors happening in that function. If necessary, insert as many "print to console" puzzle as needed to find the cause of the issue.
Printing to console is considered the most straightforward and efficient method of debugging. It's also very helpful for understanding what your script is actually doing. Again, don't hesitate to add as many "print to console" as possible. Print everything! Variables, function return values, values returned by the "get..." puzzles. Even plain "Here I am" string might be of some value.
The only thing that you should be aware once you've done with bug fixing, is removing the "print to console" puzzle(s). This will prevent cluttering the browser console making it available for debugging next time.
Summary
Ability to find bugs in Puzzles and resolve them quickly is the first skill you should master. Let's repeat the algorithm:
- open (F12) the browser console and look for errors... not really helpful? Go to step 2
- insert print to console in the right places and see what is printed
