DEV Community

Cover image for An awesome visual debugger
Muhimen
Muhimen

Posted on • Edited on

An awesome visual debugger

Programming can often cause you a headache. And when you have more bugs than the line of code, it can give you a severe heart attack!๐Ÿ˜œ While the professionals have trouble debugging their codes, they misery of beginners and dumb programmers(me) have no need of telling. Debugging small codes is often easy as you don't need to go through more lines. But when the code gets bigger and messier, founding out bugs is complicated. Traditional terminal or console-based debugger can sometimes become a name of panic(mostly for newbies). But no more!!! Allow me to introduce Python tutor.

Python tutor is an awesome web-based debugger(you can debug other languages too). But unlike any traditional debugger, you can visualize your code even better with this. You can go to the link and explore the wonders all by yourself. But let me give a brief introduction with the help of this small code.
The sample code I'll be using will just take a list as input and then turn the list elements into an integer(default input type in python is a string) and then minus the elements by one.| Written in python but should be easy for all to understand |

Alt Text

Start by writing your code in the editor. You can also copy-paste code in here. And then smash the "Visualize Execution" button.

Alt Text

A page like this should appear.

Alt Text

This is your controller. The input option will not show unless you have an input statement in your code. If you press 'next' you will start seeing what part of your code is running including all the variables, list, loop, etc. That green arrow beside your code means "This line got executed" and the red arrow means "This line is next to get executed." Just below your controller, you will see the steps.

As you go along your code you will see the items to your right changing.

Alt Text
Just like this.
Alt Text

You might have also noticed the variable values to change in the "Frame" part in the right.

If your code is super big and pressing the 'next' button is not enough for you then you can drag the slider to reach a certain point of execution. But remember Python tutor doesn't allow you to debug codes more than 1000 steps. It will stop at 999.
Alt Text

As your code gets finished executing you will see the output on the top right. just like this.
Alt Text

And, that's it. This is how you can visually debug your code using Python tutor. Now, this necessarily doesn't mean you can only debug python code here. You can debug the following codes in here.
Alt Text

This isn't the only thing Python tutor allows you to do. In case you are dumb like me and don't know how to debug code properly then press the "Get live help" button in the upper left corner.

Alt Text

Wait for a few moments and then you will start getting volunteers to help you debug your code.

Alt Text

You can also help others in this similar manner.
Alt Text

That's all I had to share with you guys. Just remember, this is just a tool to "help" you debug your code. It will not debug your code. It depends on your skill whether you can successfully use it or not. If you have the skill needed, a visual or terminal-based debugger should not matter.

Happy debugging for you๐Ÿ˜ƒ

Top comments (0)