補充知識點：數(shù)據(jù)面板介紹

• 數(shù)據(jù)面板可以查看所有變量

• 在變量上點擊右鍵，可以設(shè)置變量值、復(fù)制變量值等操作

• 聚焦于數(shù)據(jù)面板時，可以通過鍵入值來搜索過濾。點擊下圖所示按鈕可以控制是否篩選。

補充知識點：監(jiān)聽面板介紹

可以將變量添加到監(jiān)聽面板，實時觀察變量的變化。

• 在變量面板通過右鍵選擇“添加到監(jiān)視”將變量添加到監(jiān)聽面板

• 也可以直接在監(jiān)聽面板選擇添加按鈕進行變量添加

• 添加變量后就可以實時監(jiān)聽變量的變化

補充知識點：調(diào)試服務(wù)器時打開一個URI

開發(fā) Web 程序通常需要在 Web 瀏覽器中打開特定 URL，以便在調(diào)試器中訪問服務(wù)器代碼。VS Code 有一個內(nèi)置功能“ serverReadyAction ”來自動化這個任務(wù)。

• 一段簡單的server代碼

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",
  "serverReadyAction": {
    "pattern": "listening on port ([0-9]+)",
    "uriFormat": "http://localhost:%s",
    "action": "openExternally"
  }
}
復(fù)制代碼

• 配置launch.json，以支持打開URI

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",
  "serverReadyAction": {
    "pattern": "listening on port ([0-9]+)",
    "uriFormat": "http://localhost:%s",
    "action": "openExternally"
  }
}
復(fù)制代碼

pattern是設(shè)置匹配的程度端口號，端口號放在小括號內(nèi)，即作為一個正則的捕獲組使用。uriFormat映射為URI，其中%s使用pattern中的第一個捕獲組替換。最后使用該URI作為外部程序打開的URI。

• 按F5調(diào)試，會自動打開瀏覽器，且會在下圖所示處中斷，當繼續(xù)執(zhí)行后，瀏覽器才能看到輸出了server的內(nèi)容

終局：各場景調(diào)試實戰(zhàn) 調(diào)試NodeJS項目

關(guān)于NodeJs項目的調(diào)試方法，已經(jīng)在上述的斷點的基本使用部分做了介紹，可以網(wǎng)上滾動翻閱。

調(diào)試Typescript項目

• 調(diào)試TS項目前，先創(chuàng)建一個TS項目
• 先初始化一個ts程序，生成默認的tsconfig.json文件

# 終端運行
tsc --init
復(fù)制代碼

• 打開tsconfig.json文件，開啟sourceMap選項和指定編譯后輸出的路徑

VS Code 內(nèi)置了對 Ts 調(diào)試的支持。為了支持調(diào)試 Ts 與正在執(zhí)行的 Js 代碼相結(jié)合，VS Code 依賴于調(diào)試器的source map在 Ts 源代碼和正在運行的 Js 之間進行映射，所以需要需要開啟sourceMap選項。

{
    "sourceMap": true,
    "outDir": "./out"
}
復(fù)制代碼

• 新建index.ts文件，寫一個基本的ts代碼

const num: number = 123;
console.log(num);
function fn(arg: string): void {
  console.log('fn', arg);
}
fn("Hello");
復(fù)制代碼

• 手動編譯調(diào)試TS

在上述的ts基本項目中：

終端執(zhí)行ts的編譯命令tsc

此時可以看到生成了out文件夾，里面包含一個index.js和一個index.js.map文件

最新評論