How to implement breakpoint debugging Vue in Visual Studio Code

This article summarizes the method of debugging Vue with Visual Studio Code breakpoints and sharing of experience. Friends in need can refer to it.

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, select Properties

• In the target column, add at the end --remote-debugging-port=9222 Be sure 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 Install plug-in

Click on the left side of Visual Studio Code Extension button in the sidebar, 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 debugging configuration window, and then select chrome. VS Code will generate a .vscode directory in the root directory of the workspace, and there will be a lanch.json file in it. And it will automatically open

• and 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 mismatch problems, and Some modifications are needed:

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

• Change the devtool value under the dev node For 'eval-source-map'

• Change the cacheBusting value under the dev node to false

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement the undo and redo function in Immutable.js (detailed tutorial)

How to solve the select of iview The problem of misplaced drop-down box options, the specific operations are as follows

How to implement the select drop-down list through Vue.js, the specific operations are as follows

The above is the detailed content of How to implement breakpoint debugging Vue in Visual Studio Code. For more information, please follow other related articles on the PHP Chinese website!