這篇文章跟大家介紹一下試模式的必要性,聊聊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
中偵錯js
,
在
vscode
終端機裡運行node
#時, 自動附加,
直接使用
vscode
提供的debug
終端,
使用設定檔,
模式.debug
在
vscode
的終端機裡運行node
時, 根據不同的選項, 自動判斷是否啟動
一共有4 種選項, 切換選項的方式也有三種
不管透過哪種設定方式, 更換了設定方式之後, 最好重啟一下
vscode以讓它更好的生效
開啟設定檔
settings.json
檔案之後
// 修改或添加 { "debug.javascript.autoAttachFilter": "onlyWithFlag" }
使用
Ctrl Shift P
調出指令(mac
或修改了快速鍵的自己找一下),
輸入
attach
可以找到它, 選取後可以看到這四個選項, 然後再次選取選項切換到你想要的選項
#官網的文件沒有更新, 預設選項已經不是
smart
#了, 改成disabled
了
#意思 | |
---|---|
|
|
|
|
| 總是(
always) 總是以 debug模式啟動 |
smart) | 只有指定的檔案, 才進入
debug模式 |
# )
帶有
--inspect或
inspect-brk參數, 以
debug模式啟動
停用(disabled
)
永遠不使用
debug模式啟動
智能(smart)
是透過
debug.javascript.autoAttachSmartPattern這個設定項指定的是否開啟
debug模式的檔案路徑, 預設值是
["${ workspaceFolder}/**“,”!**/node_modules/**“,”**/$KNOWN_TOOLS$/**"]
模式, 那麼vscodenode --inspect
模式, 哎~將也不會進入
debug模式, 只能透過下面的方式開啟一個
debug終端才能進入
debug
也是個坑貨, 不知道啥時間把預設方式改成了2 JavaScript Debug Terminal(debug終端機)disabled
模式, 還挺奇怪的, 現在才明白怎麼回事., 所以我記得有一次我使用
node --inspect沒能進入
debug
debug都會進入模式的終端機, 在裡面啟動的
node
debug透過上面的方式(模式.
這個才是重頭戲, 我也是主要想了解這個3 Launch Configuration(啟動設定)
模式的方式, 它提供了更加配置化去滿足運行調試複雜應用程式debug
啟動配置是以一種設定檔的方式去設定如何啟動
#這個設定檔位於目前工作區目錄下的.vscode/launch.json
, 可以手動建立一個, 或透過
vscode快速建立一個
然後選擇 | node就好了 | |
---|---|---|
必需屬性, 修改的比較多的應該是 | name了, 另兩個在 node中, 一般都不會修改. |
|
屬性名稱 | 意義 | 屬性值範例
| type
node => pwa-node | ,chrome => pwa-chrome |
我们常用的是
launch
, 所以这里只是讨论了launch
的使用.
对于
launch
和attach
的区别, 可以看 B 站上这个大佬的视频, 讲解地很好.程序员阿汤 => 介绍 launch.json
name
的含义是: 一个launch.json
中可以配置多个启动配置, 所以需要给每个启动配置起个名字, 用于区分
{ "version": "0.2.0", "configurations": [ { "name": "node调试", "port": 9229, "request": "attach", "skipFiles": ["/**"], "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 指定的文件中 |
(这个挺有用的, 有些代码不想跟进去看, 但是经常点快了, 就进去了..., 可以把这些文件排除掉,
配置上这个, 可以跳过
/**/*.js node
核心模块的代码.)
开启
trace
后
launch
支持的属性属性 | 含义 |
---|---|
program | 启动项目的入口文件地址(就是要执行的js 的路径) |
args | 相当于命令行参数(下面有详解) |
cwd | 指定程序启动的路径(下面有详解) |
runtimeExecutable | 指定可执行程序的启动路径(下面有详解) |
runtimeArgs | 给可执行程序的参数(下面有详解) |
env | 指定环境变量(下面有详解) |
"args": ["aaa", "bbb"]
:在命令行传递参数的方式, 在node
中可以通过process.argv
拿到
"cwd": "${workspaceFolder}/demo"
, 配置这个路径, 在node
中, 相当于指定了process.cwd()
的路径
这个可以指定启动的程序名, 比如使用
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路径 } ] }
这个里面写的参数会紧跟在可执行程序后面, 在
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
启动项目的时候, 比较有用
{ "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 的核心库, 比如`require` ], "cwd": "${workspaceFolder}", // 指定可执行程序的启动路径, process.cwd(), "runtimeExecutable": "nodemon", // 指定可执行程序名称, 或者路径, 在这里 type 为 pwa-node 默认值是 node "runtimeArgs": ["--experimental-modules"] // 启动命令时, 跟在 runtimeExecutable 后的参数 } ] }
这里已经有三个坑了,模块化
,调试技巧
,vscode插件开发
, 我目前更想先写一个vscode插件
,敬请期待.
感觉这篇文章能改到你启发的, 希望给个点赞, 评论, 收藏, 关注...
更多编程相关知识,请访问:编程视频!!
以上是VSCode中怎麼開啟調試模式?三種方式淺析的詳細內容。更多資訊請關注PHP中文網其他相關文章!