VSCode中怎麼開啟調試模式？三種方式淺析

這篇文章跟大家介紹一下試模式的必要性，聊聊VSCode中開啟調試模式的三種方式，希望對大家有幫助！

在程式碼編寫或維護(修bug )的過程中, 對於簡單的值或問題, 我們可以透過 console來解決, 甚至有人認為console大法好, 是銀彈, 能解決所有問題, 我認為並不是的. 對於想要理清楚代碼的執行邏輯, 還有查看複雜類型(引用型別)的值時, 還是得使用到調試模式(debugger) 的。 https://juejin.cn/post/7024890041948176398#heading-1

##debugger 是js 中的一個語句, 運行到這一行, 如果程式是在偵錯模式下, 會斷點, 就是會停在這一行, 那麼我們就可以看到此時的上下文環境, 包括最重要的變數的值, 和呼叫堆疊. 然後還支援我們單步驟調試, 或逐塊調試.

平時在瀏覽器中調試的比較多, 在瀏覽器中, 只需要打開控制台, 開啟了調試模式, 然後遇到

debugger語句, 或自訂的斷點, 就會讓程式停下來, 進入debug模式.

##這篇文章主要是會討論一下在

vscode

中開啟調試模式的方法, 因為我準備寫一個vscode插件(敬請期待哈), 調試 vscode就在所難免了, 之前的簡單調試也肯定滿足不了我的需求了, 所以來了解一下vscode的調試模式.

這篇文章不會寫調試的技巧, 只是會寫一下,

vscode

怎麼開啟調試js. 這裡是vscode官方文檔

再論調試模式的必要性

如果只需要看一個簡單的值, 那麼完全可以使用

console

, 因為開啟調試模式的成本比較大.

在瀏覽器中, 因為物件是引用類型的並且瀏覽器不會直接將物件完成折疊開, 所以如果

console

之後修改了物件, 再到控制台去看, 得到的將是修改後的物件了

#列印後並沒有自動全部折疊開

##去手動折開的時候, 瀏覽器再去讀值, 已經變成了修改後的值

#這種問題的出現​​, 是因為物件, 所以如果我們轉字串再列印就不會有這個問題, 但是, 不好看, 這裡只是舉個例子, 有些情況下還是需要用調試模式的.

在

vscode

中開啟偵錯模式在vscode中偵錯js,

ts

程式碼, 有三種方式

• 在vscode終端機裡運行node#時, 自動附加,

  見3.1
.

• 直接使用vscode提供的debug終端,

  見3.2

• 使用設定檔,

  見3.3

#1 Auto Attach(自動附加)

在vscode的終端機裡運行node時, 根據不同的選項, 自動判斷是否啟動

debug

模式.

一共有4 種選項, 切換選項的方式也有三種

1.1 切換選項的方式

不管透過哪種設定方式, 更換了設定方式之後, 最好重啟一下

vscode

以讓它更好的生效

#透過設定

##############透過修改設定檔################

開啟設定檔settings.json檔案之後

// 修改或添加
{
  "debug.javascript.autoAttachFilter": "onlyWithFlag"
}

透過指令(推薦)

使用Ctrl Shift P 調出指令(mac或修改了快速鍵的自己找一下),

輸入attach可以找到它, 選取後可以看到這四個選項, 然後再次選取選項切換到你想要的選項

#1.2 各個選項的意義

#官網的文件沒有更新, 預設選項已經不是smart#了, 改成disabled了

總是(智能(只有指定的檔案, 才進入只帶標誌(

	#意思
	always)總是以debug模式啟動
smart)	debug模式

onlyWithFlag

# )

帶有--inspect或inspect-brk 參數, 以debug模式啟動

停用(

disabled)永遠不使用debug模式啟動智能(smart)是透過debug.javascript.autoAttachSmartPattern這個設定項指定的是否開啟debug模式的檔案路徑, 預設值是["${ workspaceFolder}/**“，”！**/node_modules/**“，”**/$KNOWN_TOOLS$/**"]

如果啟動了

禁用( disabled)

模式, 那麼

node --inspect將也不會進入debug模式, 只能透過下面的方式開啟一個debug終端才能進入debug

模式, 哎~

vscode

也是個坑貨, 不知道啥時間把預設方式改成了

disabled, 所以我記得有一次我使用node --inspect沒能進入debug

模式, 還挺奇怪的, 現在才明白怎麼回事.

2 JavaScript Debug Terminal(debug終端機)

直接啟動一個

debug

模式的終端機, 在裡面啟動的

node

都會進入

debug

模式.

透過上面的方式(

Auto Attach)控制的是vscode

中啟動的所有終端機, 這個只控制它啟動的這一個終端機.

3 Launch Configuration(啟動設定)

這個才是重頭戲, 我也是主要想了解這個

啟動配置是以一種設定檔的方式去設定如何啟動

debug

模式的方式, 它提供了更加配置化去滿足運行調試複雜應用程式

3.1 啟動設定的屬性

#這個設定檔位於目前工作區目錄下的

.vscode/launch.json , 可以手動建立一個, 或透過vscode快速建立一個

node#必需屬性必需屬性, 修改的比較多的應該是屬性名稱屬性值範例type偵錯器型別, 也可以認為是偵錯的語言,

然後選擇	就好了
		name了, 另兩個在node中, 一般都不會修改.
	意義
	node => pwa-node	chrome => pwa-chrome

###request###### #啟動###debug###的模式的請求類型,只有兩個值#########launch###:啟動, ###attach###:附加####### ######name######此啟動配置的名稱, 用於使用者自己區分######自訂, 自己理解就行, 給你自己用的####### #####

request

我们常用的是 launch , 所以这里只是讨论了 launch 的使用.

对于 launch 和 attach 的区别, 可以看 B 站上这个大佬的视频, 讲解地很好. 程序员阿汤 => 介绍 launch.json

name

name的含义是: 一个launch.json中可以配置多个启动配置, 所以需要给每个启动配置起个名字, 用于区分

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "node调试",
      "port": 9229,
      "request": "attach",
      "skipFiles": ["<node_internals>/**"],
      "type": "pwa-node"
    },
    {
      "type": "pwa-chrome",
      "request": "attach",
      "name": "chrome调试",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

选中某一个, 然后可以使用快捷键f5, 快速启动, 或者点击运行图标

launch和attach都支持的属性

属性	含义
outFiles	指定Source maps文件所在路径
resolveSourceMapLocations	也是指定与Source maps相关的路径
timeout	附加的超时时间, 超时就放弃
stopOnEntry	项目启动起来, 立即debugger一下, 就是相当于在代码的第一行加了一个debugger
localRoot	这个是用来远程调试用的, 我就先不了解它了...
remoteRoot	这个是用来远程调试用的, 我就先不了解它了...
smartStep	自动跳过没有映射到的源文件
skipFiles	指定单步跳过的文件, 就是debugger不跟进去看的源代码
trace	开启会将一些调试输出保存到vscode指定的文件中

skipFiles

(这个挺有用的, 有些代码不想跟进去看, 但是经常点快了, 就进去了..., 可以把这些文件排除掉, <node_internals>/**/*.js</node_internals>配置上这个, 可以跳过node核心模块的代码.)

trace

开启trace后

launch支持的属性

属性	含义
program	启动项目的入口文件地址(就是要执行的js的路径)
args	相当于命令行参数(下面有详解)
cwd	指定程序启动的路径(下面有详解)
runtimeExecutable	指定可执行程序的启动路径(下面有详解)
runtimeArgs	给可执行程序的参数(下面有详解)
env	指定环境变量(下面有详解)

args

"args": ["aaa", "bbb"] :在命令行传递参数的方式, 在node中可以通过process.argv拿到

cwd

"cwd": "${workspaceFolder}/demo", 配置这个路径, 在node中, 相当于指定了process.cwd()的路径

runtimeExecutable

这个可以指定启动的程序名, 比如使用nodemon启动, 或者指定路径, 比如你有 3 个版本的 node 想启动调试看看各个版本的差异, 就不需要切换全局的 node 版本, 只需要设置多个配置项就行啦. 这样很方便的.

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "v10 版本启动",
      "program": "${workspaceFolder}/demo.js",
      "request": "launch",
      "type": "pwa-node",
      "runtimeExecutable": "C:\\Program Files\\nodejsv10\\node.js" // 这里是 v10 版本的node路径
    },
    {
      "name": "v11 版本启动",
      "program": "${workspaceFolder}/demo.js",
      "request": "launch",
      "type": "pwa-node",
      "runtimeExecutable": "C:\\Program Files\\nodejsv11\\node.js" // 这里是 v11 版本的node路径
    },
    {
      "name": "v12 版本启动",
      "program": "${workspaceFolder}/demo.js",
      "request": "launch",
      "type": "pwa-node",
      "runtimeExecutable": "C:\\Program Files\\nodejsv12\\node.js" // 这里是 v12 版本的node路径
    }
  ]
}

runtimeArgs

这个里面写的参数会紧跟在可执行程序后面, 在node程序中, node会将它后面的第一个参数视为它要执行的文件的路径, 所以需要有所调整.

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "v10 版本启动",
      "program": "${workspaceFolder}/demo.js", // 这个现在已经不是 node 的执行文件地址了, 它只是一个参数了
      "request": "launch",
      "type": "pwa-node",
      "args": ["args1", "args2"],
      "runtimeArgs": ["${workspaceFolder}/demo.js", "runtimeArgs2"] // 因为它紧跟在 可执行程序后面, 所以它的第一个参数需要设置为它要执行的文件的地址
      // 如果它是 --experimental-modules 类型参数就没事了, 因为node会把它解析成参数, 这个参数的含义是 启动 es 模块支持. 接下来我会写一篇 js 的模块化的文章, 敬请期待哈
    }
  ]
}
// 启动的命令行是
// C:\Program Files\nodejs\node.exe E:\font-end/demo.js runtimeArgs2 .\demo.js args1 args2

这个参数在弄成 npm 启动项目的时候, 比较有用

env

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "v10 版本启动",
      "program": "${workspaceFolder}/demo.js",
      "request": "launch",
      "type": "pwa-node",
      "env": {
        "NODE_ENV": "prod"
      }
    }
  ]
}

attach支持的属性

我们常用的是 launch 方式启动, 就先不了解 attach 的方式启动了.

总结

对于如何在vscode中启动debug模式, 应该是比较清楚的了

在vscode中, 一共有三种方式启动debug调试, 分别是

• 自动附加(影响全局的终端), 如果对自己电脑性能有自信, 设置为always. 命令行运行进入debug模式.

• 强制开启(只影响这一个终端), 如果不方便配置开启全局的自动debug, 使用这种方式进入debug, 也是比较放便的, 就是重新开启这个debug终端之后, 需要cd到需要运行的js文件目录, 比较麻烦. 命令行运行进入debug模式.

• 配置开启(功能强大, 适合调试复杂应用),配置好.vscode/launch.json后, f5启动进入debug模式

// 比较完整一个 launch.json 配置
{
  // 使用 IntelliSense 了解相关属性。
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "v10 版本启动", // 配置名称
      "program": "${workspaceFolder}/demo.js", // 项目启动入口文件
      "request": "launch", // `debug`模式的请求方式
      "stopOnEntry": true, // 项目启动, 立即`debugger`一下
      "type": "pwa-node", // 调试器类型
      "env": {
        // 环境变量
        "NODE_ENV": "prod"
      },
      "args": ["aaaa"], // 启动命令时跟在 program 后的参数
      "skipFiles": [
        // 指定单步调试不进去的文件
        "<node_internals>/**" // node 的核心库, 比如`require`
      ],
      "cwd": "${workspaceFolder}", // 指定可执行程序的启动路径, process.cwd(),
      "runtimeExecutable": "nodemon", // 指定可执行程序名称, 或者路径, 在这里 type 为 pwa-node 默认值是 node
      "runtimeArgs": ["--experimental-modules"] // 启动命令时, 跟在 runtimeExecutable 后的参数
    }
  ]
}

最后

这里已经有三个坑了, 模块化,调试技巧, vscode插件开发, 我目前更想先写一个vscode插件,敬请期待.

感觉这篇文章能改到你启发的, 希望给个点赞, 评论, 收藏, 关注...

更多编程相关知识，请访问：编程视频！！

以上是VSCode中怎麼開啟調試模式？三種方式淺析的詳細內容。更多資訊請關注PHP中文網其他相關文章！