To better understand the workings of the code, open the console in your browser – we’ll use client-side JavaScript to show the different states of our code.

console.log() is a classic, but sometimes you want more structure and the option to display more values at once and for such situations, console.table() is awesome.

In two places in the code, I’m building a JavaScript object as a string with Ampscript:

/* Debug value capture before processing */
set @debug1 = Concat('{',
                        '"@case": "', @case, '",',
                        '"@feedback": "', @feedback, '",',
                        '"@previousWord": "', @previousWord, '",',
                        '"@theWordEncoded": "', @theWordEncoded, '",',  
                        '"@lastGuess": "', @lastGuess, '",',
                        '"@guesses": "', @guesses, '",',
                        '"@alphabet": "', @alphabet, '",',
                        '"@evaluation": "', @evaluation, '",',
                    '}')

which is later shown in the form of a table in the console using the following code fragment:

<script>
    console.table(%%=v(@debug1)=%%)
    console.table(%%=v(@debug2)=%%)
</script>

In the end it gives us an output like this each time the page loads:

NOTE
Properties with empty strings ('') will not be shown as rows in the console. null values will be shown normally.