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

This article will explain in detail the example analysis of Visual Studio Code breakpoint debugging Vue for you. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Debugging Vue code in Chrome's debug window, or directly using console.log to observe variable values, is a very painful thing, requiring at least three forms to be opened at the same time. Individuals are still more used to breakpoint debugging. This article shows how to configure Visual Studio Code and Chrome to debug code directly at the VS Code breakpoint, and see the same value of console in Chrome in the debug window of VS Code.

Set Chrome remote debug port

First, 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

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

MacOS

Open the console to execute:

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

Linux

Open the console to execute:

Google-chrome-remote-debugging-port=9222

Visual Stuido Code install 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 enter it again, and click reload to restart VS Code when the installation is complete

Add Visual Studio Code configuration

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.

{/ / 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 a vue project packaged based on webpack, there may be a breakpoint mismatch and some changes need to be made:

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

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

Change the cacheBusting value under the dev node to false

Start debugging.

Everything is in place, and now the acceptance results are available.

Open Chrome by remote debugging and opening it through the first step

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

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.

This is the end of this article on "sample analysis of Visual Studio Code breakpoint debugging Vue". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.