補(bǔ)充知識(shí)點(diǎn)：數(shù)據(jù)面板介紹

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

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

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

補(bǔ)充知識(shí)點(diǎn)：監(jiān)聽(tīng)面板介紹

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

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

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

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

補(bǔ)充知識(shí)點(diǎn)：調(diào)試服務(wù)器時(shí)打開(kāi)一個(gè)URI

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

• 一段簡(jiǎn)單的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，以支持打開(kāi)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è)置匹配的程度端口號(hào)，端口號(hào)放在小括號(hào)內(nèi)，即作為一個(gè)正則的捕獲組使用。uriFormat映射為URI，其中%s使用pattern中的第一個(gè)捕獲組替換。最后使用該URI作為外部程序打開(kāi)的URI。

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

終局：各場(chǎng)景調(diào)試實(shí)戰(zhàn) 調(diào)試NodeJS項(xiàng)目

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

調(diào)試Typescript項(xiàng)目

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

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

• 打開(kāi)tsconfig.json文件，開(kāi)啟sourceMap選項(xiàng)和指定編譯后輸出的路徑

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

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

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

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

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

在上述的ts基本項(xiàng)目中：

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

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

最新評(píng)論