SoFunction
Updated on 2025-03-04

A brief analysis of Visual Studio Code breakpoint debugging Vue

Many people are accustomed to debugging Vue code in Chrome's debug window, or directly using , to observe variable values. This is a very painful thing, and at least 3 forms need to be opened at the same time. I am more accustomed to breakpoint debugging. This article will introduce how to configure Visual Studio Code and Chrome to complete the debugging code directly at VS Code breakpoints, and see the same value of console in Chrome in the debug window of VS Code.

Set up Chrome Remote Debug Port

First, we need to start Chrome with remote debugging open so that VS Code can be attached to Chrome:

Windows

  • Right-click on Chrome's shortcut icon and select Properties
  • In the target column, add --remote-debugging-port=9222 at the end. Note that you should use spaces to separate them.

macOS

Open the console to execute:

/Applications/Google\ /Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Linux

Open the console to execute:

google-chrome --remote-debugging-port=9222

Visual Stuido Code Installation Plugin

Click the extension button on the left sidebar of Visual Studio Code, then enter Debugger for Chrome in the search box and install the plug-in, then enter, and after the installation is completed, click reload to restart VS Code

Add Visual Studio Code configuration

  • Click the Debug button on the left sidebar of Visual Studio Code, click the Settings pinion in the pop-up debug configuration window, and then select chrome, VS Code. The .vscode directory will be generated in the root directory of the workspace, and there will be a file in it and will be opened automatically.
  • Overwrite the automatically generated file content with the configuration file below.
{
 // Use IntelliSense to learn about possible attributes.
 // Hover to view descriptions of existing attributes.
 // For more information, visit: /fwlink/?linkid=830387
 "version": "0.2.0",
 "configurations": [
  {
   "type": "chrome",
   "request": "attach",
   "name": "Attach to Chrome",
   "port": 9222,
   "webRoot": "${workspaceRoot}/src",
   "url": "http://localhost:8080/#/",
   "sourceMaps": true,
   "sourceMapPathOverrides": {
    "webpack:///src/*": "${webRoot}/*"
   }
  }
 ]
}

Modify webpack's sourcemap

If you are a vue project packaged based on webpack, there may be a problem of breakpoint mismatch, and some modifications are needed:

  • Open the file in the config directory in the root directory
  • Change the devtool value under the dev node to 'eval-source-map'
  • Change the cacheBusting value under the dev node to false

Start debugging

Everything is available, now the acceptance results are

  • Open Chrome in remote debugging through the first step
  • Run npm run dev in vue project to start the project in debug mode
  • Click the debug button in the left sidebar of VS Code, select Attach to Chrome and click the green start button, and the debug control bar will appear under normal circumstances.
  • Now you can debug the breakpoint in the js code of the .vue file.