Learn how to use breakpoints and watch expressions in VSCode to control and inspect your code execution, find and fix errors, and optimize your performance.

To use breakpoints in VSCode: 1. Open your project. 2. Navigate to the file. 3. Click on the left of the line number to set a breakpoint (or press F9). 4. Start debugging with F5 or Ctrl+Shift+D. 5. Inspect variables in the Debug view or by hovering over them. 6. Step through your code with F10, F11, or Shift+F11. 7. Continue execution with F5. 8. Remove breakpoints by clicking again or pressing F9.

Last updated on Jul 10, 2024

How do you debug and test your code in VSCode using breakpoints and watch expressions?

Debugging and testing your code are essential skills for any program developer. They help you find and fix errors, optimize your performance, and ensure your code works as intended. One of the most popular tools for debugging and testing is Visual Studio Code (VSCode), a free and open-source code editor that supports many languages and extensions. In this article, you will learn how to use breakpoints and watch expressions in VSCode to debug and test your code more efficiently and effectively.

1 What are breakpoints and watch expressions?

Breakpoints are locations in your code where you want the execution to pause, so you can inspect the state of your variables, stack, and output. Watch expressions are expressions that you want to evaluate and monitor while debugging, such as the value of a variable, a function call, or a condition. You can use breakpoints and watch expressions together to control the flow of your code and examine the changes in your data.

Add your perspective

Joao Paulo Veiga

Tech Lead | Account Manager | Full Stack | Scrum
Report contribution
Os pontos de interrupção e expressões de observação são ferramentas essenciais para depurar e testar código no VSCode. Um ponto de interrupção é um marcador colocado em uma linha específica do código, interrompendo a execução quando alcançado, permitindo que você inspecione variáveis e avalie o estado do programa. Já as expressões de observação permitem monitorar o valor de variáveis em tempo real durante a execução, fornecendo insights detalhados sobre o comportamento do código. Ao combinar pontos de interrupção estratégicos com expressões de observação pertinentes, você ganha um poderoso conjunto de ferramentas para identificar e corrigir bugs de maneira eficiente no ambiente de desenvolvimento integrado do VSCode.

Translated

Like
Leonardo Fabian Lescano

Desenvolvedor Full Stack (Java/Node.js) | Especialista em Back-End | Spring | SQL | Ágil
Report contribution
No VSCode, a depuração com pontos de interrupção e expressões de observação facilita a análise do código em tempo de execução. Pontos de interrupção: Pausa a execução em linhas específicas do código, permitindo inspecionar o estado das variáveis e o fluxo do programa. Expressões de observação: Avalia expressões em tempo real durante a depuração, fornecendo insights sobre valores e comportamentos do código. Controle de execução: Permite avançar, retroceder ou pular etapas do código, facilitando a identificação de problemas e bugs. Com essas ferramentas, você pode analisar o código em detalhes, identificar erros e otimizar a lógica do seu programa de forma eficiente.

Translated

Like

2 How to set breakpoints in VSCode?

To set a breakpoint in VSCode, you can simply click on the left margin of the editor, next to the line number where you want to pause. You will see a red dot indicating the breakpoint. You can also right-click on the line and select "Toggle Breakpoint" from the context menu. To disable or remove a breakpoint, you can click on the red dot again, or right-click and select "Remove Breakpoint" or "Disable Breakpoint". To manage all your breakpoints, you can open the Breakpoints panel from the Debug view on the left sidebar.

Add your perspective

Tahereh Aeenehvand

Theoretical Physics MSc Graduate | Data Science Enthusiast | Python Developer
Report contribution
To set breakpoints in VSCode, simply click on the line number where you want the breakpoint to be placed. This will create a red circle indicating the breakpoint.

Like

3 How to use breakpoints in VSCode?

To use breakpoints in VSCode, you need to start a debugging session. You can do this by clicking on the Run and Debug button on the left sidebar, or pressing F5. You can also select a specific configuration from the dropdown menu, or create your own launch.json file to customize your debugging settings. Once you start debugging, your code will run until it reaches a breakpoint, or until you pause it manually. You can then use the Debug toolbar or the keyboard shortcuts to step over, step into, step out, or continue the execution. You can also hover over any variable or expression in your code to see its value, or use the Debug Console to enter commands and evaluate expressions.

Add your perspective

Andrey Balabanov

🔶 Senior Software Engineer | Frontend Developer | JavaScript, TypeScript, React, Redux | 5+ Years of Frontend Experience
Report contribution
To use breakpoints in VSCode: 1. Open your project. 2. Navigate to the file. 3. Click on the left of the line number to set a breakpoint (or press F9). 4. Start debugging with F5 or Ctrl+Shift+D. 5. Inspect variables in the Debug view or by hovering over them. 6. Step through your code with F10, F11, or Shift+F11. 7. Continue execution with F5. 8. Remove breakpoints by clicking again or pressing F9.

Like

4 How to set watch expressions in VSCode?

To set a watch expression in VSCode, you can open the Watch panel from the Debug view on the left sidebar. You can then click on the "+" icon or press Enter to add a new expression. You can type any valid expression in your language, such as a variable name, a function call, or a condition. You can also drag and drop any expression from your code to the Watch panel. You can edit, remove, or reorder your watch expressions by right-clicking on them or using the buttons on the top.

Add your perspective

5 How to use watch expressions in VSCode?

To use watch expressions in VSCode, you need to have a debugging session running. Your watch expressions will be evaluated and updated every time the execution pauses or steps. You can see the value and type of each expression in the Watch panel, or hover over them to see more details. You can also expand or collapse any complex or nested expressions to see their properties and values. Watch expressions can help you monitor the changes in your data and test your logic while debugging.

Add your perspective

Navheen H.

Manufacturing Engineer III at ARi with expertise in Lean Six Sigma and Industrial Engineering
Report contribution
Some ways to get started will be 1.Opening the debug view in application by pressing `Ctrl+Shift+D`. 2. Modify the debug session according to your requirements by selecting and pressing the play button 3.Based on the requirement, you can configure Mutiple breakpoints or set it. 4. Add watch expressions by entering them in the input field and going forward you can add watch expressions by clicking the add button. Repear these steps to achieve the watch expressions effectively to monitor the values of variables and expressions used in your code.

Like

6 How to combine breakpoints and watch expressions in VSCode?

To combine breakpoints and watch expressions in VSCode, you can use them together to create more powerful and flexible debugging scenarios. For example, you can set conditional breakpoints that only pause when a certain expression is true, or logpoint breakpoints that only print a message to the console when reached. You can also set watchpoints that pause when a variable changes its value, or inline breakpoints that pause on every possible location within a line. You can configure these options by right-clicking on a breakpoint and selecting "Edit Breakpoint". You can also use watch expressions to modify the value of a variable or execute a function while debugging, by right-clicking on them and selecting "Set Value" or "Run Watch Expression".

Add your perspective

How do you debug and test your code in VSCode using breakpoints and watch expressions?

1

2

3

4

5

6

1 What are breakpoints and watch expressions?

2 How to set breakpoints in VSCode?

3 How to use breakpoints in VSCode?

4 How to set watch expressions in VSCode?

5 How to use watch expressions in VSCode?

6 How to combine breakpoints and watch expressions in VSCode?

Program Development

Rate this article

Thanks for your feedback

More articles on Program Development

More relevant reading