VS Code tossing notes- (7) In-depth built-in Debug function [tune the latest version of angular-cli]

https://blog.csdn.net/crper/article/details/60957348

foreword

Many friends say that after using the packaging tool (Webpack), it is very painful to debug breakpoints; 
the conventional way is nothing more than debuggerDafa console.log(); 
however, the vscode product naturally supports the debug function, no need for it, today I will talk about how to tune angular- cli;

---

Extra talk (extra)

vscodeUpdated recently . . The latest version is 1.10.2; do not explain in detail, click;

1. Introduced minimap (this is good). enabled in the configuration file "editor.minimap.enabled": true; of course there are some additional minimap parameters
2. Built-in JSDOC function, and one less plug-in can be removed to  **trigger
3. The copied content remains formatted and full of style, suitable for copying to documents or something
4. The directory tree introduces command control, and you can customize the binding keys, such as creating new directories and files
5. The Debug function is enhanced, and it supports column breakpoints.
6. Configuration file settings that some programming languages ​​do by default
7. terminalThe output link can be accessed directly by clicking
8. HTML DOMquick jump
9. There are more configuration items for Debug, and gulp is natively supported. These need to be researched on their own.

For the rest of the highlights, go to the release log by yourself...

---

Vs Code Debug(Ctrl + Shift +D)

Another screenshot to explain, blame me, otherwise it's hard to say. . .

Some shortcut keys

1. CONT (F5)
2. Step over (F10)
3. Single step debugging (F11)
4. Step Out (Shift + F11)
5. Reboot (Ctrl + Shift + F5 )
6. Stop/End (Shift + F5)

Install the plugin

Debugger for Chrome : Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.

In short: let your code be debugged on chrome, why doesn't vscode integrate this, maybe control the size or something. .

Remember ng serveto start first, debugging is debugging, excluding booting angular-cli;

The configuration file is simple:

{
  "version": "0.2.0",
  "configurations": [{
    "name": "LaunchChrome",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:4200",
    "sourceMaps": true,
    "webRoot": "${workspaceRoot}",
    "userDataDir": "${workspaceRoot}/.vscode/chrome"
  }]
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

Configuration explained

• version : You define the version of this configuration file, the default is 0.2.0, when generated
• configuration: configuration domain
• name: the name of the configuration file, for example you can call itDebug Angular-cli
• type: the type of debugging, which is natively supported by vscode node, for example go, php, chromethese depend on plugins
• request : The request type of the configuration file, there are launchtwo attachtypes, see the official documentation for details
• url: This is brought by the chrome plugin, specifying the link to visit
• webRoot: It is also brought by the chrome plug-in, specifying the root directory or executable file
• ${workspaceRoot}: is the project directory you open vscode to read
• sourceMaps: It is enabled by default. For packaged debugging, friends must enable it
• userDataDir: Temporary directory for saving things generated by the debugging process

---

start debugging

1. In the correct case, a new chrome page will pop up,
2. The breakpoint is very simple, just directly on the page where you need the breakpoint, click on the left side of the line number, where there is a small red dot, click the red dot to mark it (click the small red dot again to cancel), such as picture: 
   
3. Open the corresponding page, and the code block that executes the response will trigger the debug. . Then vscode can see the data you want to see. . Debugging process (single step or something), the corresponding local file will display data changes in your

---

Summarize

The Debug function of VS Code is quite easy to use. If you want to bootstrap the program and then open chrome, it can also be achieved, but the configuration file that needs to be written is cumbersome and takes a lot of time;

In addition to native support for node's built-in debug, the following all require the help of plug-ins

1. C#
2. Python
3. Chrome
4. C/C++
5. Go

Copyright statement: Copyright: CRPER (if you need to reprint, please retain the copyright); Nuggets|Github: CRPER; https://blog.csdn.net/bomess/article/details/60957348

• This article has been included in the following columns:
• Visual Studio Code tossing