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

This article is about how to debug vscode breakpoints. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. Open the Chrome remote debugging 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, select the properties in the target column, and add-- remote-debugging-port=9222 at the end. Be careful to separate them with spaces.

MacOS

Open the console

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

Linux

Open the console and execute the command google-chrome-- remote-debugging-port=9222

2. 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 configuration file

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

(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. Enable debugging

After the above configuration is completed:

(1) Open Chrome by remote debugging and opening it in the first step

(2) execute npm run dev in the vue project to start the project in debugging 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 appear under normal circumstances.

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

Thank you for reading! This is the end of the article on "how to debug the breakpoint of vscode". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can 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.