Question

Describe options for debugging applications and specifically how you can debug an application with Visual Studio Code.

Answer 1

Answer:-

Describe options for debugging applications

1. Observe: What are the symptoms? Subtle details are often important. Once, for example, the absence of an error message indicated to me that some piece of code was not being run (which implied that the bug was further up the stack).

BTW: I sometimes find that the process of describing a bug to someone else helps me to fix it. Verbalizing what I think is going on often helps me to think more clearly about the problem.

2. Propose a hypothesis: What explains the observations? Don't start blindly chaging things. Try to imagine what could be going wrong (even if it seems improbable at first). You may come up with multiple hypotheses (a pointer might be NULL because it was never set OR because it got clobbered); try to falsify as many hypotheses as you can (e.g., the pointer is clearly set here, so it must be getting clobbered later.)

You may not be able to come up with a full explanation right away. For example, sometimes I realize that a crash could happen if function B is called before function A, but I don't know how that sequence could happen. Test your hypothesis anyway: either way you've narrowed the problem space.

3. Design an experiment: To test your hypothesis, come up with a change that would indicate whether your hypothesis is right or wrong. This is where Pete Lamonica's advice about making only one change at a time is important.

Also, it never hurts to get as much data as possible. Once, to find a rare bug, I added some debug code that would print out the value of a variable when the bug occurred. Sure enough, the output confirmed what I suspected (that the variable was NULL) but I neglected to add other printfs that help me figure out why the variable was NULL. I should have had several guesses for why the variable was NULL and add enough printfs to prove/disprove as many as possible.

4. Understand the results: Finally, it is important to come to as full an understanding as possible. Sometimes you make a fix and the problem goes away. But unless you understand why the fix fixed it, you can't be sure that you addressed the full problem. For example, sometimes the real bug is a race-condition and any change "fixes" it by changing the timing slightly.

how you can debug an application with Visual Studio Code.

One of the key features of Visual Studio Code is its great debugging support. VS Code's built-in debugger helps accelerate your edit, compile and debug loop.

Debugger extensions#

VS Code has built-in debugging support for the Node.js runtime and can debug JavaScript, TypeScript, or any other language that gets transpiled to JavaScript.

For debugging other languages and runtimes (including PHP, Ruby, Go, C#, Python, C++, PowerShell and many others), look for Debuggers extensions in our VS Code Marketplace or select Install Additional Debuggers in the top-level Run menu.

Start debugging#

The following documentation is based on the built-in Node.js debugger, but most of the concepts and features are applicable to other debuggers as well.

It is helpful to first create a sample Node.js application before reading about debugging. You can follow the Node.js walkthrough to install Node.js and create a simple "Hello World" JavaScript application (app.js). Once you have a simple application set up, this page will take you through VS Code debugging features.

Run view#

To bring up the Run view, select the Run icon in the Activity Bar on the side of VS Code. You can also use the keyboard shortcut Ctrl+Shift+D.

The Run view displays all information related to running and debugging and has a top bar with debugging commands and configuration settings.

If running and debugging is not yet configured (no launch.json has been created) we show the Run start view.

Run menu#

The top-level Run menu has the most common run and debug commands:

Launch configurations#

To run or debug a simple app in VS Code, press F5 and VS Code will try to run your currently active file.

However, for most debugging scenarios, creating a launch configuration file is beneficial because it allows you to configure and save debugging setup details. VS Code keeps debugging configuration information in a launch.json file located in a .vscode folder in your workspace (project root folder) or in your user settings or workspace settings.

To create a launch.json file, open your project folder in VS Code (File > Open Folder) and then select the Configure gear icon on the Run view top bar.

VS Code will try to automatically detect your debug environment, but if this fails, you will have to choose it manually:

Here is the launch configuration generated for Node.js debugging:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${file}"
    }
  ]
}

If you go back to the File Explorer view (Ctrl+Shift+E), you'll see that VS Code has created a .vscode folder and added the launch.json file to your workspace.

Note: You can debug a simple application even if you don't have a folder open in VS Code, but it is not possible to manage launch configurations and set up advanced debugging. The VS Code Status Bar is purple if you do not have a folder open.

Note that the attributes available in launch configurations vary from debugger to debugger. You can use IntelliSense suggestions (Ctrl+Space) to find out which attributes exist for a specific debugger. Hover help is also available for all attributes.

Do not assume that an attribute that is available for one debugger automatically works for other debuggers too. If you see green squiggles in your launch configuration, hover over them to learn what the problem is and try to fix them before launching a debug session.

Review all automatically generated values and make sure that they make sense for your project and debugging environment.

Launch versus attach configurations#

In VS Code, there are two core debugging modes, Launch and Attach, which handle two different workflows and segments of developers. Depending on your workflow, it can be confusing to know what type of configuration is appropriate for your project.

If you come from a browser Developer Tools background, you might not be used to "launching from your tool," since your browser instance is already open. When you open DevTools, you are simply attaching DevTools to your open browser tab. On the other hand, if you come from a server or desktop background, it's quite normal to have your editor launch your process for you, and your editor automatically attaches its debugger to the newly launched process.

The best way to explain the difference between launch and attach is to think of a launch configuration as a recipe for how to start your app in debug mode before VS Code attaches to it, while an attach configuration is a recipe for how to connect VS Code's debugger to an app or process that's already running.

VS Code debuggers typically support launching a program in debug mode or attaching to an already running program in debug mode. Depending on the request (attach or launch), different attributes are required, and VS Code's launch.json validation and suggestions should help with that.

Add a new configuration#

To add a new configuration to an existing launch.json, use one of the following techniques:

• Use IntelliSense if your cursor is located inside the configurations array.
• Press the Add Configuration button to invoke snippet IntelliSense at the start of the array.
• Choose Add Configuration option in the Run menu.

VS Code also supports compound launch configurations for starting multiple configurations at the same time; for more details, please read this section.

In order to start a debug session, first select the configuration named Launch Program using the Configuration drop-down in the Run view. Once you have your launch configuration set, start your debug session with F5.

Alternatively you can run your configuration through the Command Palette (Ctrl+Shift+P), by filtering on Debug: Select and Start Debugging or typing 'debug ', and selecting the configuration you want to debug.

As soon as a debugging session starts, the DEBUG CONSOLE panel is displayed and shows debugging output, and the Status Bar changes color (orange for default color themes):

In addition, the debug status appears in the Status Bar showing the active debug configuration. By selecting the debug status, a user can change the active launch configuration and start debugging without needing to open the Run view.

Debug actions#

Once a debug session starts, the Debug toolbar will appear on the top of the editor.

• Continue / Pause F5
• Step Over F10
• Step Into F11
• Step Out Shift+F11
• Restart Ctrl+Shift+F5
• Stop Shift+F5

Tip: Use the setting debug.toolBarLocation to control the location of the debug toolbar. It can either be the default floating, docked to the Run view or hidden. A floating debug toolbar can be dragged