Debugging Applications

[JennaSys]

Debugging browser applications is a little different than debugging a Python program in your favorite IDE. There are two main ways I have been debugging in the web browser when trying to understand what is going on in my program at a given time:

1. Using the low level but tried and true print() statement to show current values
2. Utilizing sourcemaps with step debugging in the web browser and inspecting values in real time

When you transpile Python code that has print() statements with Transcrypt, by default, it essentially turns them into console.log() statements in JavaScript that will send the output of the print() statements to the developer console in the web browser. But if you have been using Transcrypt for any length of time you probably already know this. So the trick here, is that if you create an HTML DIV element in your HTML code and set the id attribute of that DIV to "terminal", it will redirect that console output of the print() statements to the InnerHTML of that DIV element instead.

<div id='__terminal__'></div>

This lets you see the output of the print() statements right in the application without having to open up the developer console in the web browser. There is some demonstration code of this somewhat obscure feature of Transcrypt in the documentation that give you an idea of how it can be used.