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

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

Visual Studio Code (hereinafter referred to as vscode) is a very powerful editor, relatively lightweight. Vscode supports windows,OS X and Linux, and can install extensions, so it can meet the requirements of the vast majority of people. The following describes how vscode uses debug functions. Take node code as an example, I hope it can be helpful to you.

Vscode interface

The top left corner is the project directory, search, version management git related (the lower left corner is the current branch), debugging, other extensions, others are marked in Chinese, do not explain, are all necessary for us, if there is no suggestion, these are all necessary things for debugging, you can go to the menu bar to view them one by one.

Debugging prerequisites: launch.json configuration

Click the fourth button on the left in the picture, that is, debug, and then click the red box in the picture to open launch.json

"configurations": [{"type": "node", "request": "launch", "name": "Launch Program", "program": "${workspaceFolder} / src/extract-cli.js", "args": ["- output", "output.pot", "${workspaceFolder} / test/product_group.vm"] "outDir": "${workspaceFolder} / dist", "sourceMaps": true}]

Type and request do not need to be changed. By default, you can start debugging with F5 when request is launch, and request means attach is associated with a running program according to the official website, but you can ignore it here. We can just debug it with the debugger that comes with vscode.

The parameter program is to specify the js entry file to run, where ${workspaceFolder} is the currently open project directory, and the .vscode directory is automatically generated in this directory, and launch.json is also in this directory.

Args is also more important, for example, in this example, I execute the command gettext-extract-- output output.pot input.vm, then the function of args is to pass in the parameters after the command. Each space should be separated and written as a child element of args.

SourceMaps is not useful for writing es5 code, but it is very necessary for writing es6,TypeScript, etc. When the value of this parameter is true, the map generated by the compilation process will be used to correspond to the compiled code. In this way, at the source code break point, we can happily debug.

OutDir is used to mark the generated directory of compiled code to help vscode find it.

Let's discuss the correspondence before and after compilation.

I use babel to compile here, after an attempt, if the program parameter points directly to the compiled file, vscode can miraculously find the source file by itself, which is the easiest way for our debugging. If program points to the file you wrote, then you need to provide an outDir parameter, as long as it is configured to the compiled generation directory. Other: visually do not need sourceMaps and compile to .js.map if you encounter problems with debugging, try to set sourceMaps to true and have the compilation tool generate a map file

Debug code

Just click on the left side of the code you are debugging, as long as it is red, indicating that the breakpoint here is feasible, as shown in the figure

Press F5 directly to start debugging, and several single-step skips similar to chrome, single-step debugging and so on will appear on the interface, using methods similar to chrome, but with slightly different shortcuts

Then click the debug button described above on the left, and you will see the variables running to a certain step, as well as the call stack, as shown in the figure

Other

By the way, I will introduce the knowledge related to babel and command line entry used in this article.

When you open package.json, you will find that there is a bin configuration. When you configure npm install, you will add these two commands to node_modules/.bin, and then you can use it as a command line.

"bin": {"gettext-compile": ". / dist/compile-cli.js", "gettext-extract": ". / dist/extract-cli.js"}

When babel executes the command, you can add-source-maps true to generate the map file. If you encounter the problem I mentioned above, you will only use this. It is estimated that other compilation tools will also have In addition, after we modify the source file, we want to restart debugging to verify it, and it is troublesome to execute commands by ourselves every time. Then babel supports watch parameters, which can monitor file changes, so that we can achieve simple automation of babel or other command-line commands written very long, not easy to remember, so we can write them in package.json, as follows: babel is compiled and written in it. You can execute npm run prepublish.

"scripts": {"prepublish": "babel-watch-presets es2015-plugins transform-object-assign-source-maps true src-out-dir dist/"} Thank you for reading! This is the end of this article on "the usage of vscode debug". 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.