Sharing the method of debugging Vue with breakpoints in Visual Studio Code

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

Set Chrome remote debugging port

First we need to start Chrome with remote debugging turned on so that VS Code can attach to Chrome:

Windows

• Right-click the Chrome shortcut icon and select Properties

• In Target One column, add --remote-debugging-port=9222 at the end. Be careful to separate them with spaces
  

macOS

Open the console and execute:

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

##Linux

Open the console and execute:

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

Visual Stuido Code installation plug-in

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 it again. After the installation is complete, click reload to restart VS Code

Add Visual Studio Code Configuration

• Click the debug button in the left sidebar of Visual Studio Code, click the settings pinion in the pop-up debug configuration window, and then select chrome, VS Code will Generate a .vscode directory in the root directory of the workspace. There will be a lanch.json file in it and it will be opened automatically.

• Use the following configuration file to overwrite the contents of the automatically generated lanch.json file.

{
 // Use IntelliSense to learn about possible attributes.
 // Hover to view descriptions of existing attributes.
 // For more information, visit: https://go.microsoft.com/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 the sourcemap of webpack

If you are packaging a vue project based on webpack, there may be breakpoint mismatches Problem, you still need to make some modifications:

• Open the index.js file in the config directory in the root directory

• Change the Change the devtool value to 'eval-source-map'

• Change the cacheBusting value under the dev node to false

  
  

Start debugging

Everything is ready, now the results are accepted

• Open Chrome with remote debugging in the first step

• Execute npm run dev in the vue project to start the project in debugging mode

• Click the debug button in the left sidebar of VS Code and select Attach to Chrome and click the green start button, the debugging control bar will appear under normal circumstances.

• Now you can debug breakpoints in the js code of the .vue file.

Related recommendations:

Must-see js breakpoint debugging experience sharing

Visual Studio Code vs. Node. Detailed explanation of the use of breakpoint debugging in js

Discussion on several methods of php breakpoint debugging

The above is the detailed content of Sharing the method of debugging Vue with breakpoints in Visual Studio Code. For more information, please follow other related articles on the PHP Chinese website!