vscode怎么調(diào)試typescript vscode ts項(xiàng)目的配置指南

4913

vs code調(diào)試typescript的關(guān)鍵在于配置調(diào)試器與編譯后的JavaScript建立連接，并通過(guò)source map映射回源碼。1. 安裝必要擴(kuò)展，如debugger for chrome或node.JS內(nèi)置調(diào)試器；2. 配置tsconfig.json并確保開(kāi)啟”sourcemap”: true、指定”outdir”等關(guān)鍵選項(xiàng)；3. 創(chuàng)建launch.json配置調(diào)試信息，根據(jù)運(yùn)行環(huán)境選擇node.js或chrome調(diào)試類型；4. 設(shè)置tasks.json定義編譯任務(wù)以實(shí)現(xiàn)自動(dòng)編譯；5. 在代碼中設(shè)置斷點(diǎn)并啟動(dòng)調(diào)試。遇到問(wèn)題時(shí)檢查tsconfig.json的include/exclude路徑、類型定義文件、嚴(yán)格模式錯(cuò)誤及版本兼容性；若source map失效，需確認(rèn)sourcemap選項(xiàng)開(kāi)啟、路徑匹配、清除瀏覽器緩存并禁用代碼壓縮。對(duì)于遠(yuǎn)程調(diào)試，需在服務(wù)器啟動(dòng)時(shí)開(kāi)放調(diào)試端口、配置ssh端口轉(zhuǎn)發(fā)并在launch.json中使用attach請(qǐng)求類型，正確填寫(xiě)遠(yuǎn)程地址和路徑。

vscode怎么調(diào)試typescript vscode ts項(xiàng)目的配置指南

VS Code調(diào)試typescript，本質(zhì)上是建立起VS Code調(diào)試器與編譯后的JavaScript代碼之間的橋梁。你需要配置launch.json文件，讓調(diào)試器知道如何啟動(dòng)你的應(yīng)用，以及如何找到對(duì)應(yīng)的TypeScript源碼進(jìn)行斷點(diǎn)調(diào)試。

vscode怎么調(diào)試typescript vscode ts項(xiàng)目的配置指南

解決方案

vscode怎么調(diào)試typescript vscode ts項(xiàng)目的配置指南

  1. 安裝必要的擴(kuò)展: 確保你安裝了Debugger for Chrome (如果你的應(yīng)用運(yùn)行在瀏覽器中) 或者 Node.js 內(nèi)置調(diào)試器 (如果你的應(yīng)用運(yùn)行在Node.js環(huán)境中)。TypeScript本身的支持VS Code已經(jīng)內(nèi)置，無(wú)需額外安裝。

    vscode怎么調(diào)試typescript vscode ts項(xiàng)目的配置指南

  2. 配置tsconfig.json: 你的tsconfig.json文件至關(guān)重要。確保以下幾個(gè)關(guān)鍵選項(xiàng)設(shè)置正確：

    • “sourceMap”: true：生成source map文件，這是調(diào)試TypeScript的關(guān)鍵，它將編譯后的JavaScript代碼映射回原始的TypeScript代碼。
    • “outDir”: “./dist” (或者你選擇的輸出目錄)：指定編譯后的JavaScript文件存放的目錄。
    • “target”: “es5” 或 “es6” (根據(jù)你的項(xiàng)目需求)：指定編譯的目標(biāo)JavaScript版本。
    • “module”: “commonjs” 或 “esnext” (同樣根據(jù)項(xiàng)目需求)：指定模塊化方案。

    一個(gè)典型的tsconfig.json 可能如下所示：

    {   "compilerOptions": {     "target": "es5",     "module": "commonjs",     "outDir": "./dist",     "sourceMap": true,     "strict": true,     "esModuleInterop": true,     "skipLibCheck": true,     "forceConsistentCasingInFileNames": true   },   "include": ["src/**/*"],   "exclude": ["node_modules"] }

  3. 配置launch.json: 這是VS Code調(diào)試配置的核心。你需要?jiǎng)?chuàng)建一個(gè).vscode/launch.json文件，并根據(jù)你的運(yùn)行環(huán)境進(jìn)行配置。

    • 調(diào)試Node.js應(yīng)用:

      {   "version": "0.2.0",   "configurations": [     {       "type": "node",       "request": "launch",       "name": "Launch Program",       "program": "${workspaceFolder}/dist/index.js", // 編譯后的入口文件       "preLaunchTask": "tsc: build - tsconfig.json", // 編譯任務(wù)       "outFiles": [         "${workspaceFolder}/dist/**/*.js" // 編譯后的js文件位置       ],       "sourceMaps": true     }   ] }

    • 調(diào)試瀏覽器應(yīng)用 (Chrome):

      {   "version": "0.2.0",   "configurations": [     {       "type": "chrome",       "request": "launch",       "name": "Launch Chrome against localhost",       "url": "http://localhost:8080", // 你的應(yīng)用運(yùn)行的URL       "webRoot": "${workspaceFolder}/src" // TypeScript源碼根目錄     }   ] }

  4. 配置編譯任務(wù): 在.vscode文件夾下創(chuàng)建tasks.json文件，定義TypeScript編譯任務(wù)。

    {   "version": "2.0.0",   "tasks": [     {       "label": "tsc: build - tsconfig.json",       "command": "tsc",       "args": [         "-p",         "${workspaceFolder}/tsconfig.json"       ],       "group": "build",       "problemMatcher": "$tsc"     }   ] }

  5. 設(shè)置斷點(diǎn)并啟動(dòng)調(diào)試: 在你的TypeScript代碼中設(shè)置斷點(diǎn)，然后點(diǎn)擊VS Code調(diào)試面板中的“啟動(dòng)調(diào)試”按鈕。VS Code會(huì)自動(dòng)編譯你的TypeScript代碼，啟動(dòng)調(diào)試器，并在斷點(diǎn)處暫停。

TypeScript編譯錯(cuò)誤如何排查？

  1. 檢查tsconfig.json: 確保tsconfig.json文件配置正確，特別是”include”和”exclude”選項(xiàng)，確保包含了所有需要編譯的TypeScript文件，并排除了不需要編譯的文件。
  2. 類型定義文件缺失: 如果你使用了第三方庫(kù)，確保安裝了對(duì)應(yīng)的類型定義文件（通常以@types/開(kāi)頭）。如果沒(méi)有，嘗試安裝npm install –save-dev @types/。
  3. 嚴(yán)格模式錯(cuò)誤: 如果開(kāi)啟了”strict”: true，TypeScript會(huì)進(jìn)行更嚴(yán)格的類型檢查。你需要修復(fù)所有類型錯(cuò)誤才能成功編譯。
  4. 版本沖突: 確保你的TypeScript版本與項(xiàng)目依賴的庫(kù)的版本兼容。可以嘗試更新或降級(jí)TypeScript版本。

Source Map失效的常見(jiàn)原因及解決辦法？

  1. sourceMap選項(xiàng)未開(kāi)啟: 確保tsconfig.json中的”sourceMap”: true選項(xiàng)已開(kāi)啟。
  2. 編譯后的JavaScript文件與Source Map文件位置不匹配: 確保編譯后的JavaScript文件和Source Map文件位于同一目錄下，或者launch.json中的outFiles配置正確。
  3. 瀏覽器緩存: 清除瀏覽器緩存，有時(shí)候?yàn)g覽器會(huì)緩存舊的JavaScript文件和Source Map文件。
  4. 代碼壓縮/混淆: 如果你使用了代碼壓縮或混淆工具，可能會(huì)導(dǎo)致Source Map失效。確保在調(diào)試環(huán)境下禁用代碼壓縮和混淆。
  5. 路徑問(wèn)題: 檢查launch.json中的webRoot配置，確保它指向你的TypeScript源碼根目錄。

如何配置VS Code實(shí)現(xiàn)自動(dòng)編譯和調(diào)試？

  1. 配置tasks.json: 如前文所述，配置一個(gè)TypeScript編譯任務(wù)。
  2. 配置launch.json: 在launch.json中，使用”preLaunchTask”選項(xiàng)指定編譯任務(wù)。這樣，每次啟動(dòng)調(diào)試時(shí)，VS Code會(huì)自動(dòng)執(zhí)行編譯任務(wù)。
  3. 監(jiān)聽(tīng)文件變化: 可以使用chokidar等工具監(jiān)聽(tīng)TypeScript文件的變化，并在文件變化時(shí)自動(dòng)編譯。但這通常需要額外的配置和腳本。

如何調(diào)試運(yùn)行在遠(yuǎn)程服務(wù)器上的TypeScript應(yīng)用？

  1. 遠(yuǎn)程調(diào)試端口: 在遠(yuǎn)程服務(wù)器上啟動(dòng)應(yīng)用時(shí)，需要指定一個(gè)調(diào)試端口。例如，對(duì)于Node.js應(yīng)用，可以使用node –inspect=9229 your-app.js啟動(dòng)應(yīng)用。

  2. 端口轉(zhuǎn)發(fā): 如果你的本地機(jī)器無(wú)法直接訪問(wèn)遠(yuǎn)程服務(wù)器的調(diào)試端口，可以使用SSH端口轉(zhuǎn)發(fā)。

  3. 配置launch.json: 在launch.json中，將”request”設(shè)置為”attach”，并指定遠(yuǎn)程服務(wù)器的IP地址和調(diào)試端口。

    {   "version": "0.2.0",   "configurations": [     {       "type": "node",       "request": "attach",       "name": "Attach to Remote",       "address": "your-remote-server-ip",       "port": 9229,       "localRoot": "${workspaceFolder}",       "remoteRoot": "/path/to/your/project/on/remote/server"     }   ] }

    注意替換your-remote-server-ip和/path/to/your/project/on/remote/server為實(shí)際的值。

記住，調(diào)試是一個(gè)迭代的過(guò)程。遇到問(wèn)題時(shí)，仔細(xì)檢查配置文件，查看錯(cuò)誤信息，并逐步排查。

? 版權(quán)聲明
THE END
開(kāi)發(fā)工具
# 工具# ai# JavaScript# 瀏覽器# JS# json# vscode# ssh# for# chrome# include# npm# map# typescript# 編譯錯(cuò)誤# es6# 嚴(yán)格模式
喜歡就支持一下吧
點(diǎn)贊13 分享