VsCode’s Debug mode supports direct debugging of Ts source files using sourceMap files while running compiled files

DebuggingThe effect

As shown in the figure, when debugging the test.js file is compiled, the final effect is Debug Ts source code, so that we can see the effect of the code running more directly. If there is any error, you can directly modify the source code, rather than through the compiled JS file, separated by a layer

This is ideal for developing and debugging libraries that eventually provide a Node command to the user, such as Next (which itself uses this debugging method).

To debug Typescript source files directly, there are two steps

Step 1: Always generate a Map file when compiling Typescript

Step 2: execute the compiled js file in Vscode debug mode

The first step:TsCompile the supplementaryMapfile

If you want to use VsCode’s Debug mode to Debug Typescript files directly, you need to set “sourceMap”: true, and map files must be generated at compile time

With the Map file, Debug mode can find the source through the compiled file and make breakpoints set in the source take effect

You can also run TS file debugging directly using TS-Node

Test.js - test.d.ts - test.js.mapCopy the code

Step 2: Start debugging

Start from the command line

VsCode provides a debugging Terminal. In the Terminal selection box, select Create JavaScript Debug Terminal. After creating the debugging Terminal, run the Node command directly to start the debugging mode

configurationlaunch.jsonFile to start the

Create the launch.json configuration file and enable Debug mode

{
  "version": "0.2.0"."configurations": [{"name": "launch".// Name of the debug command, which is displayed in the debug drop-down window
      "type": "node".// Debug type, depending on the language, JavaScript is usually node
      "request": "launch".// Launch type: launch in debug mode; Attach: Attach to an already started process enable debug mode and debug
      "program": "${workspaceRoot}/lib/test"."cwd": "${workspaceRoot}"."protocol": "inspector"}}]Copy the code

launch.jsonThe configuration properties

  • Commonly used configuration

    • name:debugThe command name is displayed in the Debug drop – down window
    • type: Debug type, depending on the language,JavaScriptAs a general rule, benode
    • request: Debug startup type:launch: it is todebugMode start debugging;attach: is attached to the start of an already started processdebugMode and debug
    • programSpecify the debug entry file address
    • argsParameters passed to the program can be found inprocess.argvget
    • cwdSpecifies the directory in which the program starts debugging
    • runtimeExecutableSets the runtime executable path. The default isnode, can be other executables, such as –npm,nodemon
    • runtimeArgsParameters passed to the runtime executable

  • Public attribute

    • name:debugThe command name is displayed in the Debug drop – down window
    • type: Debug type, depending on the language,JavaScriptAs a general rule, benode
    • request: Debug startup type:launch: it is todebugMode start debugging;attach: is attached to the start of an already started processdebugMode and debug
    • protocolSetting the Debugging Protocol
    • autoAttempts to automatically detect the protocol used by the target runtime
    • inspectorThe new V8 debugger protocol addresses most of the legacy issues,Node versions >= 6.3 - and Electron versions >= 1.7.4.
    • legacyThe original V8 debugger protocol,Node versions < V8.0 and Electron versions < 1.-7.4.
    • portPort used for debugging
    • addressTCP/IP address for remote debugging
    • localRootLocal address mapped during remote debugging
    • remoteRootRemote directory address for remote debugging
    • sourceMapsThe default is true
    • outFilesUsed to specify the location of sourceMaps when the map file is not in the same directory as the JS file
    • restartAutomatic restart debugging
    • timeoutConfigure the timeout period that is automatically attached
    • stopOnEntryAutomatic breakpoint to the first line of code
    • smartStepAutomatically skips code that is not mapped to source code
    • skipFilesSpecifies code that skips single-step debugging
    • traceEnabling diagnostic Output

  • Launch mode properties

    • programSpecify the debug entry file address
    • argsParameters passed to the program can be found inprocess.argvget
    • cwdSpecifies the directory in which the program starts debugging
    • runtimeExecutableSets the runtime executable path. The default isnode, can be other executables, such as –npm,nodemon
    • runtimeArgsParameters passed to the runtime executable
    • runtimeVersionSets the version of the runtime executable, which can be switched if using NVMnode.jsversion
    • envAdd additional environment variables
    • envFileFile load environment variables
    • consoleThe configuration terminal can be an external terminal or an internal integration terminal. The default value is internalConsole
    • autoAttachChildProcessesTracks all subprocedures of the debug object and automatically attaches to – subprocedures that are started in debug mode

  • Attach Configuration in attach mode

    • processIdThe specifiednodejsprocessidSince it changes every time you start, pass"${command:PickProcess}"

Platform-specific attributes

“Windows” : the Windows

“Linux” : Linux

“Osx” : macOS

Properties wrapped in Windows, Linux, and OSX will only take effect on the corresponding platform. For example:

Configurations "{"version": "0.2.0", "configurations": [{"type": "node", "request": "launch", "name": "launch Program"," Program" : "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js", "args": ["myFolder/path/app.js"], "windows": { "args": ["myFolder\\path\\app.js"] }, "osx": { "stopOnEntry": false } } ] }Copy the code

launch.jsonThe default variable

  • ${workspaceFolder}: Indicates the path to open the project.
  • ${file}: Path of the current open file.
  • ${fileBasename}: Indicates the name of the open file, including the suffix.
  • ${fileDirname}: Path to the folder where the open file is located.
  • ${fileExtname}: Extension name of the current open file.
  • ${cwd}: Current execution directory