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

This article mainly introduces the method of vscode debugging ts, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

How does vscode debug ts?

Vscode debug TypeScript

Environment

Typescript: 2.5.2

Vscode:1.16.0

Vscode debugs ts files directly

Source code: github

(https://github.com/meteor199/my-demo/tree/master/typescript/vscode-debug)

Install typescript dependencies

Npm install typescript-save-dev

Add tsconfig.json

The main thing is to set sourceMap to true.

{"compilerOptions": {"module": "commonjs", "target": "es5", "noImplicitAny": true, "outDir": ". / dist", "sourceMap": true}, "include": ["src/**/*"]}

Configure automatic compilation

Use vscode's tasks to automatically compile ts to js. You can also compile in other ways, such as gulp,webpack, etc.

Add file: / .vscode/tasks.json

{/ / See https://go.microsoft.com/fwlink/?LinkId=733558 / / for thedocumentation about the tasks.json format "version": "0.1.0", "command": "tsc", "isShellCommand": true, / /-p specified directory -w watch, automatic compilation of "args" for detecting file changes: ["- p", ".", "- w"], "showOutput": "always", "problemMatcher": "$tsc"}

Use the shortcut key Ctrl + Shift + B to turn on automatic compilation.

Configuration debugging

When debugging, you need to configure the launch.json file for vscode. This file records startup options.

Add or edit the file / .vscode / launch.json.

{"version": "0.2.0", "configurations": [{"name": "launch", "type": "node", "request": "launch", "program": "${workspaceRoot} / dist/main.js", "args": [], "cwd": "${workspaceRoot}" "protocol": "inspector"}]}

Note: program needs to be set to the corresponding js generated for the ts you want to debug.

If you need to debug / src/main.ts, this is ${workspaceRoot} / dist/main.js.

Debug

Open main.ts and add a breakpoint on the left to debug.

Use ts-node to debug ts files

Source code: github (https://github.com/meteor199/my-demo/tree/master/typescript/vscode-debug-without-compiling)

From: Debugging TypeScript in VS Code without compiling, using ts-node

Ts-node does not explicitly generate js when debugging ts files. If you do not want to compile to js and then debug, you can consider this approach.

Install the npm dependency package

Npm install typescript-save-devnpm install ts-node-save-dev

Configure tsconfig.json

The main thing is to set sourceMap to true.

{"compilerOptions": {"module": "commonjs", "target": "es5", "noImplicitAny": true, "outDir": ". / dist", "sourceMap": true}, "include": ["src/**/*"]}

Configure launch.json

Open the DEBUG interface and add configuration

Or edit / .vscode / launch.json.

{"version": "0.2.0", "configurations": [{"name": "Current TS File", "type": "node", "request": "launch", "program": "${workspaceRoot} / node_modules/ts-node/dist/_bin.js" "args": ["${relativeFile}"], "cwd": "${workspaceRoot}", "protocol": "inspector"]}

Debug

Open the ts file you want to debug and add debugger.

Open the debug interface.

After DEBUG, select the corresponding configuration in launch.json, in this case Current TS File.

Click the run button or press F5 to run.

Thank you for reading this article carefully. I hope the article "the method of vscode debugging ts" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is 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.