vscode怎麼調試ts

vscode怎麼會偵錯ts？

vscode 偵錯TypeScript

環境

typescript :2.5.2

vscode:1.16.0

vscode 直接偵錯ts 檔案

原始碼:github

#（https://github.com/meteor199/my-demo/tree/master/typescript/vscode-debug ）

安裝typescript 依賴

npm install typescript --save-dev

新增tsconfig.json

主要是將sourceMap 設為true。

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

設定自動編譯

利用 vscode 的 tasks 自動將 ts 編譯為 js。也可以用別的方式編譯，如:gulp,webpack 等。

新增檔案: /.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 指定目录；-w watch,检测文件改变自动编译
   "args": ["-p", ".","-w"],
   "showOutput": "always",
   "problemMatcher": "$tsc"
}

使用快速鍵 Ctrl Shift B 開啟自動編譯。

配置偵錯

偵錯時，需要配置 vscode 的 launch.json 檔案。這個文件記錄啟動選項。

新增或編輯檔案 /.vscode/launch.json。

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

注意 : program 需要設定為你要偵錯的 ts 產生的對應的 js。

假如需要偵錯 /src/main.ts,則此處為 ${workspaceRoot}/dist/main.js。

偵錯

開啟 main.ts，在左側新增斷點，進行偵錯。

使用ts-node 偵錯ts 檔案

原始碼:github（https://github.com/meteor199/my-demo/tree/master/ typescript/vscode-debug-without-compiling）

#來自:Debugging TypeScript in VS Code without compiling, using ts-node

#ts-node 偵錯ts 檔案時，不會明確產生js 。假如你不想編譯為 js 後 再調試，可以考慮這種方式。

安裝 npm 依賴套件

npm install typescript --save-dev
npm install ts-node --save-dev

設定 tsconfig.json

主要是將 sourceMap 設為true。

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

設定 launch.json

開啟 DEBUG 介面，新增 設定

或編輯 /.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"
        }
    ]
}

偵錯

開啟要偵錯的 ts 文件，新增debugger。

開啟 debug 介面。

在DEBUG後 選擇 launch.json 中對應的配置，此處為Current TS File。

點選執行按鍵或按 F5 運行。

相關教學推薦：vscode教學

以上是vscode怎麼調試ts的詳細內容。更多資訊請關注PHP中文網其他相關文章！