Shulou(Shulou.com)06/02 Report--

This article mainly introduces the method of debugging vue by vscode, which has certain reference value and can be used for reference by friends who need it. I hope you will learn a lot after reading this article. Next, let the editor take you to learn about it.

How does vscode debug vue?

Debug using VS Code breakpoint

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

Related recommendation: vscode tutorial

1. Open the Chrome remote debug port

First of all, we need to start Chrome with remote debugging on so that VS Code can attach to Chrome.

Windows

Right-click on the shortcut icon of Chrome and select Properties

In the goal column, add-- remote-debugging-port=9222 at the end, be careful to separate it with a space

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

two。 Install the Chrome Debug plug-in

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

3. Create a Debug profile

Click the debug button in the left sidebar of Visual Studio Code, click set 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, where there will be a lanch.json file and will open it automatically.

Overwrite the automatically generated lanch.json file contents with the following configuration file.

Note: the port number in URL should be the same as 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 webpack configuration

If it is a vue project packaged based on webpack, there may be a breakpoint mismatch and some modifications need to be made:

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

two。 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 by remote debugging and opening it through the first step

two。 Execute npm run dev in the vue project to start the project in debug mode

3. Click the debug button on the left sidebar of VS Code, select Attach to Chrome and click the green start button, and the debug control bar will normally appear.

You can now debug at breakpoints in the js code of the vue file.

Thank you for reading this article carefully. I hope it will be helpful for everyone to share the methods and contents of vscode debugging vue. At the same time, I also hope that you will support us, pay attention to the industry information channel, and find out if you encounter problems. Detailed solutions are waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.