← 返回首页
Browser debugging in VS Code
Visual Studio Code
Download

Use the Agents window to build in an agent-first way.

Documentation

Topics Overview Overview Linux macOS Windows VS Code for the Web Raspberry Pi Network Additional Components Uninstall VS Code Tutorial Copilot Quickstart User Interface Personalize VS Code Install Extensions Tips and Tricks Intro Videos Overview Setup Quickstart Overview Language Models Context Tools Agents Customization Trust & Safety Overview Agents Tutorial Agents Window Planning Memory Tools Subagents Local Agents Copilot CLI Cloud Agents Third-Party Agents Overview Chat Sessions Add Context Inline Chat Review Edits Checkpoints Artifacts Panel Debug Chat Interactions Prompt Examples Overview Instructions Prompt Files Custom Agents Agent Skills Language Models MCP Hooks Plugins Context Engineering Customize AI Test-Driven Development Edit Notebooks with AI Test with AI Test Web Apps with Browser Tools Debug with AI MCP Dev Guide OpenTelemetry Monitoring Inline Suggestions Smart Actions Best Practices Security Troubleshooting FAQ Cheat Sheet Settings Reference MCP Configuration Workspace Context Display Language Layout Keyboard Shortcuts Settings Settings Sync Extension Marketplace Extension Runtime Security Themes Profiles Overview Voice Interactions Command Line Interface Telemetry Basic Editing IntelliSense Code Navigation Refactoring Snippets Overview Multi-Root Workspaces Workspace Trust Tasks Debugging Debug Configuration Testing Port Forwarding Integrated Browser Overview Quickstart Staging & Committing Branches & Worktrees Repositories & Remotes Merge Conflicts Collaborate on GitHub Troubleshooting FAQ Getting Started Tutorial Terminal Basics Terminal Profiles Shell Integration Appearance Advanced Overview Enterprise Policies AI Settings Extensions Telemetry Updates Overview JavaScript JSON HTML Emmet CSS, SCSS and Less TypeScript Markdown PowerShell C++ Java PHP Python Julia R Ruby Rust Go T-SQL C# .NET Swift Working with JavaScript Node.js Tutorial Node.js Debugging Deploy Node.js Apps Browser Debugging Angular Tutorial React Tutorial Vue Tutorial Debugging Recipes Performance Profiling Extensions Tutorial Transpiling Editing Refactoring Debugging Quick Start Tutorial Run Python Code Editing Linting Formatting Debugging Environments Testing Python Interactive Django Tutorial FastAPI Tutorial Flask Tutorial Create Containers Deploy Python Apps Python in the Web Settings Reference Getting Started Navigate and Edit Refactoring Formatting and Linting Project Management Build Tools Run and Debug Testing Spring Boot Modernizing Java Apps Application Servers Deploy Java Apps GUI Applications Extensions FAQ Intro Videos GCC on Linux GCC on Windows GCC on Windows Subsystem for Linux Clang on macOS Microsoft C++ on Windows Build with CMake CMake Tools on Linux CMake Quick Start C++ Dev Tools for Copilot Editing and Navigating Debugging Configure Debugging Refactoring Settings Reference Configure IntelliSense Configure IntelliSense for Cross-Compiling FAQ Intro Videos Get Started Navigate and Edit IntelliCode Refactoring Formatting and Linting Project Management Build Tools Package Management Run and Debug Testing FAQ Overview Node.js Python ASP.NET Core Debug Docker Compose Registries Deploy to Azure Choose a Dev Environment Customize Develop with Kubernetes Tips and Tricks Overview Jupyter Notebooks Data Science Tutorial Python Interactive Data Wrangler Quick Start Data Wrangler PyTorch Support Azure Machine Learning Manage Jupyter Kernels Jupyter Notebooks on the Web Data Science in Microsoft Fabric Foundry Toolkit Overview Foundry Toolkit Copilot Tools Create Agents Models Playground Agent Builder Agent Inspector Evaluation Tool Catalog Fine-Tuning (Automated Setup) Fine-Tuning (Project Template) Model Conversion Tracing Profiling (Windows ML) FAQ File Structure Manual Model Conversion Manual Model Conversion on GPU Setup Environment Without Foundry Toolkit Template Project Migrating from Visualizer to Agent Inspector Overview Getting Started Resources View Deployment VS Code for the Web - Azure Containers Azure Kubernetes Service Kubernetes MongoDB Remote Debugging for Node.js Overview SSH Dev Containers Windows Subsystem for Linux GitHub Codespaces VS Code Server Tunnels SSH Tutorial WSL Tutorial Tips and Tricks FAQ Overview Tutorial Attach to Container Create Dev Container Advanced Containers devcontainer.json Dev Container CLI Tips and Tricks FAQ Default Keyboard Shortcuts Default Settings Substitution Variables Tasks Schema
Copy as Markdown

On this page there are 6 sections

Browser debugging in VS Code

Visual Studio Code includes a built-in debugger for Edge and Chrome. There are a couple ways to get started with it.

You can also debug web apps in VS Code's integrated browser without launching an external browser.

We also have more detailed walkthroughs to get started with React, Angular, and Vue, as well as other debugging recipes.

Open Link command

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)). When you run this command, you'll be prompted for a URL to open, and the debugger will be attached.

If your default browser is Edge, VS Code will use it to open the page. Otherwise, it will try to find an installation of Chrome on your system instead.

Launch configuration

Launch configs are the traditional way to set up debugging in VS Code, and provide you the most flexibility for running complex applications.

In this section, we'll go into more detail about configurations and features for more advanced debugging scenarios. Instructions for Node.js stepping over external code also apply to browser-based debugging.

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.

Launching browsers

In most cases, you'll want to start a new instance of the browser to debug your webpage or file. To do this, you can create a file named .vscode/launch.json that looks like this:

{ "version": "0.2.0", "configurations": [ { "type": "msedge", "request": "launch", "name": "Launch hello.html", "file": "${workspaceFolder}/hello.html" } ] }

Attaching to browsers

To attach to a running browser, it needs to be launched in a special debug mode. You can do this using the following command, replacing edge.exe with the path to your Edge or Chrome binary:

{ "version": "0.2.0", "configurations": [ { "type": "msedge", "request": "attach", "name": "Attach to browser", "port": 9222 } ] }

Now, you can press F5 or the Start button in the Run and Debug view to attach to the running browser. You can even add an address property to debug a browser running on a different machine.

Launch configuration attributes

Debugging configurations are stored in a launch.json file located in your workspace's .vscode folder. An introduction into the creation and use of debugging configuration files is in the general Debugging article. You can either "launch" a browser with your application, or "attach" to an existing browser that you started in debug mode.

Below is a reference of common launch.json attributes specific to browser debugging. You can view the complete set of options in the vscode-js-debug options documentation.

  • webRoot - The root directory for your source code. Most often, and by default, the webRoot is your workspace folder. This option is used for sourcemap resolution.
  • outFiles - An array of glob patterns for locating generated JavaScript files. See the section on Source maps.
  • smartStep- Try to automatically step over source code that doesn't map to source files. See the section on Smart stepping.
  • skipFiles - Automatically skip files covered by these glob patterns. See the section on Skipping uninteresting code.
  • trace - Enable diagnostic output.

These attributes are only available for launch configurations of request type launch:

  • url - The URL to automatically open when the browser is launched.
  • runtimeExecutable - Either an absolute path to the browser executable to use, or the version of the browser to use. Valid versions include stable (default), canary, beta, and dev.
  • runtimeArgs - Optional arguments passed when launching the browser.

These attributes are only available for launch configurations of request type attach:

  • url - If given, VS Code will attach to a tab with this URL. If not provided, it will attach to all browser tabs.
  • port - Port to use for remote debugging the browser, matching the --remote-debugging-port used when starting the browser. See the section on Attaching to Browsers.
  • address - IP address or hostname the debugged browser is listening on. See the section on Attaching to Browsers.

WebAssembly Debugging

WebAssembly debugging in browsers is identical to Node.js, read more about WebAssembly Debugging here.

Source Maps

The JavaScript debugger in VS Code supports source maps that allow debugging transformed code. For example, TypeScript code is compiled to JavaScript, and many web applications bundle all their JavaScript files together. The source map helps the debugger figure out how to map between your original code, and the code running in the browser.

Most modern tools used for building web applications will work out of the box. If not, our section on sourcemaps in Node.js contains guidance that applies to browser debugging as well.

Loading Source Maps

Each JavaScript file may reference a source map, by a URL or relative path. When dealing with web applications, you'll want to make sure that the URL is something the debugger running in VS Code can access. If it can't, you'll see errors in the Debug Console explaining which source maps failed to load, and why.

If it can't access it directly, VS Code will try to use the browser's network stack to request the source map. This provides an opportunity for any authentication state or network settings in the browser to be applied to the request. For example, if your source maps are in a location guarded by cookie authentication, VS Code can load them if and only if the browser session has the necessary cookies.

Focus emulation

When you debug a web application and switch focus to VS Code, the browser page loses focus. This causes :focus CSS styles to disappear, document.hasFocus() to return false, and focus event handlers to stop firing as expected.

During a browser debug session, the Debug Options panel in the Run and Debug view provides an Emulate a focused page option. When you enable this option, the page behaves as if it still has focus, even when VS Code is in the foreground. The setting persists across debug sessions.

Next steps

5/13/2026