VSCode.md

VSCode

Visual Studio Code is a free Microsoft-supported IDE that is designed to work with a wide range of languages and tools, and can be extended even further using community written extensions. It will be our primary IDE throughout the course.

How to set up VSCode

Watch our video for more advice on how to set up your VSCode instance.

What's debugging?

You can run your Python code in "debug mode", meaning that you can interrupt the execution at any line of your choosing. While the execution is paused, you can look at the values of variables, or even run Python commands in an interactive terminal with all the variables and functions available to you at that point in the file.

To try it out, write a simple Python file and save it. Then click in the margin to the left-hand side of a line so that a red dot appears. This is called adding a breakpoint. You can set as many as you like. For example:

Then select "Debug Python File" via the dropdown in the top right of the screen:

Execution will pause at your breakpoint, just before that line executes. A bar like this should appear to give you control over what happens next:

The six buttons from left to right are:

• "Continue" - let your Python code continue executing. It will only pause if it hits another breakpoint.
• "Step Over" - let the current line execute and then the debugger will pause at the next line down
• "Step Into" - if you are calling a function on the current line, the debugger will move into that function and pause on the first line of it. Otherwise it just steps over.
• "Step Out" - let the current function complete and then pause where the function was called from. If you aren't in a function, it will just continue to completion.
• "Restart"
• "Stop"

Those controls let you watch how the code executes. Other IDEs will have the same set of controls. Try it out with your file to get a feel for it. But you can do more!

• Hover your mouse over variables to check their values, or look them up in the list in the top left
• Use the "Debug Console" tab at the bottom of the screen as an interactive Python terminal to execute any code you want. You can even modify a variable and then watch how the code executes in that scenario.

So in the example above, you could run foo = 30 in the Debug Console, see the value change and then click "Step Over" and watch the debugger move to the else block.

There are some further features of the debugger, but this is enough to start debugging effectively.

How do I run my Flask app "in debug mode"?

If your app.py file contains the following code, you should be able to run it in debug mode with the button in the top right as described above. Execution will also pause at breakpoints set in other files

if __name__ == '__main__':
    app.run()

Alternatively, if you don't want to include that code, or if you don't want to open app.py each time, you can add a debug "configuration" to your VS Code project:

• Open up any Python file
• Select "Run and Debug" from the Activity Bar, i.e click on the play button with a bug from the list of icons on the left-hand side of VS Code
• Click on create a launch.json file
  • If you already have a launch configuration for whatever reason, select Add Configuration via the dropdown at the top, and then select Python from the list of options that appears
• Select Flask from the dropdown that appears at the top of the screen
• Enter todo_app/app.py instead of just the default app.py
• Click the play button from the top of the "Run and Debug" panel to start it up. If you have multiple launch configurations, make sure that "Python: Flask" is selected.

You should see your app start up. Try adding a breakpoint and then use your site as normal. Execution should pause at your breakpoint and the page won't load in the browser until you allow it to continue.