Use VS Code breakpoints

Article from: https://www.cnblogs.com/xifengxiaoma/p/9530737.html

 

Chrome debug directly in the debug window Vue code for the inconvenience, but fortunately Visual Studio Code provides Debugger for Chrome plug-in, and can be seen through the Chrome configuration directly in the VS Code breakpoint debugging code, debug window in VS Code the same values ​​console, this article will introduce the configuration process.

1. Open the Chrome Remote debugging port

First, we need to start Chrome in remote debugging is open, so VS Code to attach to Chrome.

Windows

• Right-click on Chrome shortcut icon, select Properties
• In a field goal, and finally add  --remote-debugging-port=9222，pay attention to use space-separated

macOS

• Open the console

• 执行命令 /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Linux

• Open the console
• 执行命令 google-chrome --remote-debugging-port=9222

2. Install the Chrome Debug plug-in

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

 

3. Create Debug profile

Click on the left sidebar Visual Studio Code  Debugging  button in the pop-up window, click the debug configuration  settings  pinion, then choose chrome, VS Code will be generated .vscode directory in the root directory of the workspace, and there will be a lanch.json file It will automatically open

Lanch.json overlay content file generated automatically by the following profile.

Note: WEBPACK keep consistent configuration of the port number in the URL start port number.

{
  // 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 configuration webpack

If it is based on webpack packed vue project, there may be a problem that does not match the breakpoint, but also require some modifications:

Index.js 1. Open the file in the config directory under the root directory

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

3. cacheBusting value to false the node dev

 

5. Turn on debugging

 

After the above configuration:

1. Open Chrome by way of a first step to open the way for remote debugging

2. Run vue project  npm run dev in debug mode to start the project

3. Click the VS Code Debugging button on the left sidebar, select  Attach to Chrome  and click the green Start button, debugging control bar will appear under normal circumstances.

Now you can debug a break point in the code vue js file.