

In most cases, you'll want to start a new instance of the browser to debug your webpage or file. Note: If you are just getting started with VS Code, you can learn about general debugging features and creating launch.json configuration files in the Debugging topic. Instructions for Node.js debugging with source maps and stepping over external code also apply to browser-based debugging.

In this section, we'll go into more detail about configurations and features for more advanced debugging scenarios. Launch configs are the traditional way to set up debugging in VS Code, and provide you the most flexibility for running complex applications. Otherwise, it will try to find an installation of Chrome on your system instead. If your default browser is Edge, VS Code will use it to open the page. When you run this command, you'll be prompted for a URL to open, and the debugger will be attached. The simplest way to debug a webpage is through the Debug: Open Link command found in the Command Palette ( ⇧⌘P (Windows, Linux Ctrl+Shift+P)). We also have more detailed walkthroughs to get started with React, Angular, Vue, and Ember, as well as other debugging recipes.

