VSCode中怎么開啟調(diào)試模式?三種方式淺析

本篇文章給大家介紹一下試模式的必要性,聊聊vscode中開啟調(diào)試模式的三種方式,希望對(duì)大家有所幫助!

VSCode中怎么開啟調(diào)試模式?三種方式淺析

在代碼編寫或者維護(hù)(修 bug )的過(guò)程中, 對(duì)于簡(jiǎn)單的值或者問(wèn)題, 我們可以通過(guò)console來(lái)解決, 甚至有人認(rèn)為console大法好, 是銀彈, 能解決所有問(wèn)題, 我認(rèn)為并不是的. 對(duì)于想要理清楚代碼的執(zhí)行邏輯, 還有查看復(fù)雜類型(引用類型)的值時(shí), 還是得使用到調(diào)試模式(debugger) 的。https://juejin.cn/post/7024890041948176398#heading-1

debugger 是 JS 中的一個(gè)語(yǔ)句, 運(yùn)行到這一行, 如果程序是在調(diào)試模式下, 會(huì)斷點(diǎn), 就是會(huì)停在這一行, 那么我們就可以看到此時(shí)的上下文環(huán)境, 包括最重要的變量的值, 和調(diào)用. 然后還支持我們單步調(diào)試, 或者逐塊調(diào)試.

平時(shí)在瀏覽器中調(diào)試的比較多, 在瀏覽器中, 只需要打開控制臺(tái), 開啟了調(diào)試模式, 然后遇到debugger語(yǔ)句, 或者自定義的斷點(diǎn), 就會(huì)讓程序停下來(lái), 進(jìn)入debug模式.

VSCode中怎么開啟調(diào)試模式?三種方式淺析

這篇文章主要是會(huì)討論一下在vscode中開啟調(diào)試模式的方法, 因?yàn)槲覝?zhǔn)備寫一個(gè)vscode插件(敬請(qǐng)期待哈), 調(diào)試vscode就在所難免了, 之前的簡(jiǎn)單調(diào)試也肯定滿足不了我的需求了, 所以來(lái)了解一下vscode的調(diào)試模式.

這篇文章不會(huì)寫調(diào)試的技巧, 只是會(huì)寫一下, vscode怎樣開啟調(diào)試js. scode

再論調(diào)試模式的必要性

如果只需要看一個(gè)簡(jiǎn)單的值, 那么完全可以使用console, 因?yàn)殚_啟調(diào)試模式的成本比較大.

在瀏覽器中, 因?yàn)?a href="http://m.babyishan.com/tag/%e5%af%b9%e8%b1%a1">對(duì)象是引用類型的并且瀏覽器不會(huì)直接將對(duì)象完成折疊開, 所以如果console之后修改了對(duì)象, 再到控制臺(tái)去看, 得到的將是修改后的對(duì)象了

打印后并沒有自動(dòng)全部折疊開

VSCode中怎么開啟調(diào)試模式?三種方式淺析

去手動(dòng)折疊開的時(shí)候, 瀏覽器再去讀值, 已經(jīng)變成了修改后的值

VSCode中怎么開啟調(diào)試模式?三種方式淺析

這種問(wèn)題的出現(xiàn), 是因?yàn)閷?duì)象, 所以如果我們轉(zhuǎn)字符串再打印就不會(huì)有這個(gè)問(wèn)題, 但是, 不好看, 這里只是舉個(gè)例子, 有些情況下還是需要用調(diào)試模式的.

在vscode中開啟調(diào)試模式

在vscode中調(diào)試js,ts代碼, 有三種方式

  • 在vscode終端里運(yùn)行node時(shí), 自動(dòng)附加, 見3.1.

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

  • 使用配置文件, 見3.3

1 auto Attach(自動(dòng)附加)

在vscode的終端里運(yùn)行node時(shí), 根據(jù)不同的選項(xiàng), 自動(dòng)判斷是否啟動(dòng)debug模式.

一共有 4 種選項(xiàng), 切換選項(xiàng)的方式也有三種

1.1 切換選項(xiàng)的方式

不管通過(guò)哪種設(shè)置方式, 更換了設(shè)置方式之后, 最好重啟一下vscode以讓它更好的生效

通過(guò)設(shè)置

VSCode中怎么開啟調(diào)試模式?三種方式淺析

VSCode中怎么開啟調(diào)試模式?三種方式淺析

通過(guò)修改配置文件

VSCode中怎么開啟調(diào)試模式?三種方式淺析

VSCode中怎么開啟調(diào)試模式?三種方式淺析

打開配置文件settings.json文件之后

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

通過(guò)命令(推薦)

使用Ctrl + Shift + P 調(diào)出命令(mac或者修改了快捷鍵的自己找一下),

VSCode中怎么開啟調(diào)試模式?三種方式淺析

輸入attach可以找到它, 選中后可以看到這四個(gè)選項(xiàng), 然后再次選中選項(xiàng)切換到你想要的選項(xiàng)

VSCode中怎么開啟調(diào)試模式?三種方式淺析

1.2 各個(gè)選項(xiàng)的含義

官網(wǎng)的文檔沒有更新, 默認(rèn)選項(xiàng)已經(jīng)不是smart了, 改成disabled了

選項(xiàng) 含義
始終(always) 總是以debug模式啟動(dòng)
智能(smart) 只有指定的文件, 才進(jìn)入debug模式
僅帶標(biāo)志(onlyWithFlag) 帶有–inspect或者inspect-brk 參數(shù), 以debug模式啟動(dòng)
禁用(disabled) 永遠(yuǎn)不使用debug模式啟動(dòng)

智能(smart)是通過(guò)debug.javascript.autoAttachSmartPattern這個(gè)配置項(xiàng)指定的是否開啟debug模式的文件路徑, 默認(rèn)值是[“${workspaceFolder}/**”,”!**/node_modules/**”,”**/$KNOWN_TOOLS$/**”]

如果啟動(dòng)了禁用(disabled)模式, 那么node –inspect將也不會(huì)進(jìn)入debug模式, 只能通過(guò)下面的方式開啟一個(gè)debug終端才能進(jìn)入debug模式, 哎~ vscode 也是個(gè)坑貨, 不知道啥時(shí)間把默認(rèn)方式改成了disabled, 所以我記得有一次我使用node –inspect沒能進(jìn)入debug模式, 還挺奇怪的, 現(xiàn)在才明白怎么回事.

2 JavaScript Debug Terminal(debug 終端)

直接啟動(dòng)一個(gè)debug模式的終端, 在里面啟動(dòng)的node都會(huì)進(jìn)入debug模式.

通過(guò)上面的方式(Auto Attach)控制的是vscode中啟動(dòng)的所有終端, 這個(gè)只控制它啟動(dòng)的這一個(gè)終端.

VSCode中怎么開啟調(diào)試模式?三種方式淺析

3 Launch Configuration(啟動(dòng)配置)

這個(gè)才是重頭戲, 我也是主要想了解這個(gè)

啟動(dòng)配置是以一種配置文件的方式去設(shè)置如何啟動(dòng)debug模式的方式, 它提供了更加配置化去滿足運(yùn)行調(diào)試復(fù)雜應(yīng)用

3.1 啟動(dòng)配置的屬性

這個(gè)配置文件位于當(dāng)前工作區(qū)目錄下的.vscode/launch.json, 可以手動(dòng)創(chuàng)建一個(gè), 或者通過(guò)vscode快捷創(chuàng)建一個(gè)

VSCode中怎么開啟調(diào)試模式?三種方式淺析

然后選擇node就好了

VSCode中怎么開啟調(diào)試模式?三種方式淺析

必需屬性

必需屬性, 修改的比較多的應(yīng)該是name了, 另兩個(gè)在node中, 一般都不會(huì)修改.

屬性名 含義 屬性值示例
type 調(diào)試器類型, 也可以認(rèn)為是調(diào)試的語(yǔ)言 node => pwa-node, chrome => pwa-chrome
request 啟動(dòng)debug的模式的請(qǐng)求類型,只有兩個(gè)值 launch:啟動(dòng), attach:附加
name 此個(gè)啟動(dòng)配置的名稱, 用于用戶自己區(qū)分 自定義, 自己理解就行, 給你自己用的
request

我們常用的是 launch , 所以這里只是討論了 launch 的使用.

對(duì)于 launch 和 attach 的區(qū)別, 可以看 B 站上這個(gè)大佬的視頻, 講解地很好. scode

name

name的含義是: 一個(gè)launch.json中可以配置多個(gè)啟動(dòng)配置, 所以需要給每個(gè)啟動(dòng)配置起個(gè)名字, 用于區(qū)分

{ ??"version":?"0.2.0", ??"configurations":?[ ????{ ??????"name":?"node調(diào)試", ??????"port":?9229, ??????"request":?"attach", ??????"skipFiles":?["<node_internals>/**"], ??????"type":?"pwa-node" ????}, ????{ ??????"type":?"pwa-chrome", ??????"request":?"attach", ??????"name":?"chrome調(diào)試", ??????"url":?"http://localhost:8080", ??????"webRoot":?"${workspaceFolder}" ????} ??] }</node_internals>

VSCode中怎么開啟調(diào)試模式?三種方式淺析

選中某一個(gè), 然后可以使用快捷鍵f5, 快速啟動(dòng), 或者點(diǎn)擊運(yùn)行圖標(biāo)

VSCode中怎么開啟調(diào)試模式?三種方式淺析

launch和attach都支持的屬性

屬性 含義
outFiles 指定Source maps文件所在路徑
resolveSourceMapLocations 也是指定與Source maps相關(guān)的路徑
timeout 附加的超時(shí)時(shí)間, 超時(shí)就放棄
stopOnEntry 項(xiàng)目啟動(dòng)起來(lái), 立即debugger一下, 就是相當(dāng)于在代碼的第一行加了一個(gè)debugger
localRoot 這個(gè)是用來(lái)遠(yuǎn)程調(diào)試用的, 我就先不了解它了…
remoteRoot 這個(gè)是用來(lái)遠(yuǎn)程調(diào)試用的, 我就先不了解它了…
smartStep 自動(dòng)跳過(guò)沒有映射到的源文件
skipFiles 指定單步跳過(guò)的文件, 就是debugger不跟進(jìn)去看的源代碼
trace 開啟會(huì)將一些調(diào)試輸出保存到vscode指定的文件中
skipFiles

(這個(gè)挺有用的, 有些代碼不想跟進(jìn)去看, 但是經(jīng)常點(diǎn)快了, 就進(jìn)去了…, 可以把這些文件排除掉, /**/*.js配置上這個(gè), 可以跳過(guò)node核心模塊的代碼.)

trace

開啟trace后

VSCode中怎么開啟調(diào)試模式?三種方式淺析

launch支持的屬性

屬性 含義
program 啟動(dòng)項(xiàng)目的入口文件地址(就是要執(zhí)行的js的路徑)
args 相當(dāng)于命令行參數(shù)(下面有詳解)
cwd 指定程序啟動(dòng)的路徑(下面有詳解)
runtimeExecutable 指定可執(zhí)行程序的啟動(dòng)路徑(下面有詳解)
runtimeArgs 給可執(zhí)行程序的參數(shù)(下面有詳解)
env 指定環(huán)境變量(下面有詳解)
args

“args”: [“aaa”, “bbb”] :在命令行傳遞參數(shù)的方式, 在node中可以通過(guò)process.argv拿到

VSCode中怎么開啟調(diào)試模式?三種方式淺析

cwd

“cwd”: “${workspaceFolder}/demo”, 配置這個(gè)路徑, 在node中, 相當(dāng)于指定了process.cwd()的路徑

VSCode中怎么開啟調(diào)試模式?三種方式淺析

runtimeExecutable

這個(gè)可以指定啟動(dòng)的程序名, 比如使用nodemon啟動(dòng), 或者指定路徑, 比如你有 3 個(gè)版本的 node 想啟動(dòng)調(diào)試看看各個(gè)版本的差異, 就不需要切換全局的 node 版本, 只需要設(shè)置多個(gè)配置項(xiàng)就行啦. 這樣很方便的.

{ ??"version":?"0.2.0", ??"configurations":?[ ????{ ??????"name":?"v10?版本啟動(dòng)", ??????"program":?"${workspaceFolder}/demo.js", ??????"request":?"launch", ??????"type":?"pwa-node", ??????"runtimeExecutable":?"C:Program?Filesnodejsv10node.js"?//?這里是?v10?版本的node路徑 ????}, ????{ ??????"name":?"v11?版本啟動(dòng)", ??????"program":?"${workspaceFolder}/demo.js", ??????"request":?"launch", ??????"type":?"pwa-node", ??????"runtimeExecutable":?"C:Program?Filesnodejsv11node.js"?//?這里是?v11?版本的node路徑 ????}, ????{ ??????"name":?"v12?版本啟動(dòng)", ??????"program":?"${workspaceFolder}/demo.js", ??????"request":?"launch", ??????"type":?"pwa-node", ??????"runtimeExecutable":?"C:Program?Filesnodejsv12node.js"?//?這里是?v12?版本的node路徑 ????} ??] }
runtimeArgs

這個(gè)里面寫的參數(shù)會(huì)緊跟在可執(zhí)行程序后面, 在node程序中, node會(huì)將它后面的第一個(gè)參數(shù)視為它要執(zhí)行的文件的路徑, 所以需要有所調(diào)整.

{ ??"version":?"0.2.0", ??"configurations":?[ ????{ ??????"name":?"v10?版本啟動(dòng)", ??????"program":?"${workspaceFolder}/demo.js",?//?這個(gè)現(xiàn)在已經(jīng)不是?node?的執(zhí)行文件地址了,?它只是一個(gè)參數(shù)了 ??????"request":?"launch", ??????"type":?"pwa-node", ??????"args":?["args1",?"args2"], ??????"runtimeArgs":?["${workspaceFolder}/demo.js",?"runtimeArgs2"]?//?因?yàn)樗o跟在?可執(zhí)行程序后面,?所以它的第一個(gè)參數(shù)需要設(shè)置為它要執(zhí)行的文件的地址 ??????//?如果它是?--experimental-modules?類型參數(shù)就沒事了,?因?yàn)閚ode會(huì)把它解析成參數(shù),?這個(gè)參數(shù)的含義是?啟動(dòng)?es?模塊支持.?接下來(lái)我會(huì)寫一篇?js?的模塊化的文章,?敬請(qǐng)期待哈 ????} ??] } //?啟動(dòng)的命令行是 //?C:Program?Files odejs ode.exe?E:ont-end/demo.js?runtimeArgs2?.demo.js?args1?args2

VSCode中怎么開啟調(diào)試模式?三種方式淺析

這個(gè)參數(shù)在弄成 npm 啟動(dòng)項(xiàng)目的時(shí)候, 比較有用

env
{ ??"version":?"0.2.0", ??"configurations":?[ ????{ ??????"name":?"v10?版本啟動(dòng)", ??????"program":?"${workspaceFolder}/demo.js", ??????"request":?"launch", ??????"type":?"pwa-node", ??????"env":?{ ????????"NODE_ENV":?"prod" ??????} ????} ??] }

VSCode中怎么開啟調(diào)試模式?三種方式淺析

attach支持的屬性

我們常用的是 launch 方式啟動(dòng), 就先不了解 attach 的方式啟動(dòng)了.

總結(jié)

對(duì)于如何在vscode中啟動(dòng)debug模式, 應(yīng)該是比較清楚的了

在vscode中, 一共有三種方式啟動(dòng)debug調(diào)試, 分別是

  • 自動(dòng)附加(影響全局的終端), 如果對(duì)自己電腦性能有自信, 設(shè)置為always. 命令行運(yùn)行進(jìn)入debug模式.

  • 強(qiáng)制開啟(只影響這一個(gè)終端), 如果不方便配置開啟全局的自動(dòng)debug, 使用這種方式進(jìn)入debug, 也是比較放便的, 就是重新開啟這個(gè)debug終端之后, 需要cd到需要運(yùn)行的js文件目錄, 比較麻煩. 命令行運(yùn)行進(jìn)入debug模式.

  • 配置開啟(功能強(qiáng)大, 適合調(diào)試復(fù)雜應(yīng)用),配置好.vscode/launch.json后, f5啟動(dòng)進(jìn)入debug模式

//?比較完整一個(gè)?launch.json?配置 { ??//?使用?IntelliSense?了解相關(guān)屬性。 ??//?懸停以查看現(xiàn)有屬性的描述。 ??//?欲了解更多信息,請(qǐng)?jiān)L問(wèn):?https://go.microsoft.com/fwlink/?linkid=830387 ??"version":?"0.2.0", ??"configurations":?[ ????{ ??????"name":?"v10?版本啟動(dòng)",?//?配置名稱 ??????"program":?"${workspaceFolder}/demo.js",?//?項(xiàng)目啟動(dòng)入口文件 ??????"request":?"launch",?//?`debug`模式的請(qǐng)求方式 ??????"stopOnEntry":?true,?//?項(xiàng)目啟動(dòng),?立即`debugger`一下 ??????"type":?"pwa-node",?//?調(diào)試器類型 ??????"env":?{ ????????//?環(huán)境變量 ????????"NODE_ENV":?"prod" ??????}, ??????"args":?["aaaa"],?//?啟動(dòng)命令時(shí)跟在?program?后的參數(shù) ??????"skipFiles":?[ ????????//?指定單步調(diào)試不進(jìn)去的文件 ????????"<node_internals>/**"?//?node?的核心庫(kù),?比如`require` ??????], ??????"cwd":?"${workspaceFolder}",?//?指定可執(zhí)行程序的啟動(dòng)路徑,?process.cwd(), ??????"runtimeExecutable":?"nodemon",?//?指定可執(zhí)行程序名稱,?或者路徑,?在這里?type?為?pwa-node?默認(rèn)值是?node ??????"runtimeArgs":?["--experimental-modules"]?//?啟動(dòng)命令時(shí),?跟在?runtimeExecutable?后的參數(shù) ????} ??] }</node_internals>

最后

這里已經(jīng)有三個(gè)坑了, 模塊化,調(diào)試技巧, vscode插件開發(fā), 我目前更想先寫一個(gè)vscode插件,敬請(qǐng)期待.

感覺這篇文章能改到你啟發(fā)的, 希望給個(gè)點(diǎn)贊, 評(píng)論, 收藏, 關(guān)注…

更多編程相關(guān)知識(shí),請(qǐng)?jiān)L問(wèn):scode?。?/p>

? 版權(quán)聲明
THE END
喜歡就支持一下吧
點(diǎn)贊10 分享