How to debug vue with vscode

How to debug vue with vscode?

Use VS Code breakpoint debugging

It is inconvenient to debug Vue code directly in the debugging window of Chrome. Fortunately, Visual Studio Code provides Debugger. for Chrome plug-in, you can debug the code directly in the VS Code breakpoint through configuration, and see the same value as the console in Chrome in the debugging window of VS Code. This article will introduce the configuration process.

Related recommendations: vscode tutorial

1. Open the Chrome remote debugging port

First we need to start Chrome with remote debugging turned on, so VS Code can be attached to Chrome.

Windows

Right-click the Chrome shortcut icon, select Properties

In the target column, add --remote-debugging-port=9222 at the end, pay attention to use Separate by spaces

macOS

Open the console

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

Linux

Open the console

Execute the command google-chrome --remote-debugging-port=9222

2. Install the Chrome Debug plug-in

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

3. Create a Debug configuration file

Click the debug button in the left sidebar of Visual Studio Code, and click the settings pinion in the pop-up debugging configuration window. 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. .

Note: The port number in the URL must be consistent with the startup port number configured by WEBPACK.

{
  // 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}/*"
      }
    }
  ]
}

4. Modify the webpack configuration

If it is a vue project packaged based on webpack, there may be a problem of breakpoint mismatch, and you still need to do something Modification:

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

2. Change the devtool value under the dev node to 'eval-source-map'

3. Change the cacheBusting value under the dev node to false

5. Turn on debugging

After the above configuration is completed ：

1. Open Chrome with remote debugging through the first step

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

3. Click the debug button in the left sidebar of VS Code, 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.

The above is the detailed content of How to debug vue with vscode. For more information, please follow other related articles on the PHP Chinese website!