Debugging is a critical phase in the application development lifecycle, and setting up a robust debugging environment is key to efficiently resolving issues. In VSCode, this is facilitated through the use of a launch configuration that instructs the IDE on how to manage the debugging process.
In this task, we’ll set up VSCode to debug our TypeScript application. We’ll configure VSCode to allow you to run the application in debug mode, add breakpoints, and step through your code. This will help you identify and fix issues more efficiently.
First, ensure you have your project open in VSCode. If you haven’t done so already, navigate to your project directory and open VSCode:
cd your-project-directory
code .To debug TypeScript applications, you’ll need to install the following VSCode extensions: JavaScript Debugger (Nightly). Currently, VSCode has the best support for Chrome and Microsoft Edge debugging. There are also extensions for Firefox and Safari, but they may not be as feature-rich. I recommend using Chrome or Edge for the best debugging experience.
You can install these extensions from the VSCode Marketplace.
launch.jsonVSCode uses a launch.json file to configure the debugger. This file should be placed in the .vscode directory at the root of your project. Here’s how to create and configure it:
Create the .vscode Directory: If it doesn’t exist already, create a directory named .vscode in the root of your project.
Create launch.json: Inside the .vscode directory, create a file named launch.json.
Configure launch.json: Add the following configuration to the launch.json file:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:5173/",
"webRoot": "${workspaceFolder}",
"internalConsoleOptions": "neverOpen",
"skipFiles": ["<node_internals>/**", "node_modules/**"],
"smartStep": true,
"sourceMaps": true,
"trace": true
}
]
}In this configuration:
version: The version of the launch configuration. Use 0.2.0 for the latest version.
configurations: An array of configuration objects. Each object specifies settings for a different debugging scenario.
launch to open a new instance of the browser.neverOpen to prevent the console from opening automatically.node_modules.tsconfig.json FileTo ensure that source maps are generated for debugging, you need to update the tsconfig.json file to include the sourceMap option. This option tells the TypeScript compiler to generate source maps that map the compiled JavaScript code back to the original TypeScript code.
Add the sourceMap option to your tsconfig.json file:
{
"compilerOptions": {
"sourceMap": true,
// Other compiler options...
},
// Other configuration options...
}Source maps are files that map the compiled JavaScript code back to the original TypeScript code. They are essential for debugging TypeScript code in the browser.
With your launch.json configured, you can now start adding breakpoints and debugger statements in your TypeScript code.
Breakpoints: Click to the left of the line number in the editor to add a breakpoint.
Start the Vite Development Server: Make sure your Vite development server is running. You can start it with:
pnpm run devRun the Debugger: Open the Debug panel in VSCode (View > Run or Ctrl+Shift+D). Select “Launch Chrome against localhost” from the dropdown and click the green play button.
Debug Your Application: Chrome will open with your application running. VSCode will pause execution at your breakpoints, allowing you to inspect variables, step through code, and evaluate expressions.