Yes, you can debug web pages in Chrome directly from VSCode. You need to install the Debugger for Chrome extension and configure launch.json. 1. Install the "Debugger for Chrome" extension in VSCode; 2. Make sure the project generates source maps (such as Webpack sets devtool and TypeScript enables sourceMap); 3. Create a launch.json configuration file in VSCode and specify Chrome startup parameters such as url and webRoot; 4. After starting the local development server, run the configuration through the Run and Debug panel. Chrome will open and hit the breakpoint set in VSCode to achieve the complete debugging process.

Debugging a web page in Chrome directly from VSCode is possible using the Debugger for Chrome extension and proper launch configuration. This setup lets you set breakpoints in your JavaScript/TypeScript code in VSCode and have them hit when the code runs in Chrome — all without leaving your editor.

Here's how to set it up:

1. Install the Required Extension

First, install the "Debugger for Chrome" extension in VSCode:

• Open VSCode.
• Go to the Extensions view ( Ctrl Shift X or Cmd Shift X on Mac).
• Search for "Debugger for Chrome" (by Microsoft).
• Install it.

Note: This extension launches Chrome or attaches to an existing instance and enables debugging from VSCode.

2. Enable Source Maps in Your Project

For debugging to work properly (especially with frameworks, TypeScript, or translated code), you need source maps so that breakpoints in your original source files map correctly to the code running in the browser.

Make sure your build tool (Webpack, Vite, etc.) generates source maps:

• Webpack : Set devtool: 'source-map' or 'eval-source-map' in webpack.config.js .
• Vite : Source maps are enabled by default in dev mode.
• TypeScript : In tsconfig.json , ensure:

   {
    "compilerOptions": {
      "sourceMap": true,
      "outDir": "./dist"
    }
  }

3. Configure launch.json in VSCode

Create a debug configuration that tells VSCode how to launch Chrome and map files.

• In VSCode, go to the Run and Debug view ( Ctrl Shift D ).
• Click "create a launch.json file" if you don't have one.
• Choose "Chrome" as the environment.
• Replace the content with a working config. Here's a common example:

 {
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome against localhost",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///./.*": "${webRoot}/*",
        "webpack:///*": "*",
        "webpack:///src/*": "${webRoot}/src/*"
      }
    }
  ]
}

Key Options Explained:

• "url" : The address of your running dev server (eg, http://localhost:3000 ).
• "webRoot" : Maps the source files in Chrome to your local project folder.
• "sourceMapPathOverrides" : Helps VSCode find your original source files when using bundlers like Webpack.

?? Make sure your dev server (eg, npm start , vite , webpack serve ) is already running before starting the debug session.

4. Start Debugging

1. Start your development server (eg, npm run start ).
2. In VSCode, go to the Run and Debug panel.
3. Select the "Launch Chrome against localhost" configuration.
4. Click Run (F5).

Chrome will open (or reuse an instance, depending on settings), and your app will load.

Now:

• Set breakpoints in your .js , .ts , or .tsx files in VSCode.
• When the code executes in Chrome, execution will pause at those breakpoints.
• You can inspect variables, call stack, and step through code — all in VSCode.

Tips & Troubleshooting

• Breakpoints not hitting?

  • Double-check source map generation.
  • Verify file paths in sourceMapPathOverrides .
  • Try using "trace": true in launch.json to see mapping logs.

• Use "request": "attach" to connect to an already open Chrome

  • Start Chrome with remote debugging enabled:

     chrome --remote-debugging-port=9222

  • Use this launch.json config:

     {
      "name": "Attach to Chrome",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "webRoot": "${workspaceFolder}"
    }

• Works best with simple settings or Create React App, Vite, Angular CLI . Complex bundler configs may need custom path overrides.

---

Basically, it's a combo of the right extension, source maps, and a solid launch.json . Once set up, debugging frontend code from VSCode feels seamless.

The above is the detailed content of How to debug a web page in Chrome from VSCode. For more information, please follow other related articles on the PHP Chinese website!