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

在代碼編寫或者維護(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模式.

這篇文章主要是會(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)全部折疊開

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

這種問(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è)置

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

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

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

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

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

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

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

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

智能(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è)終端.

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è)

然后選擇node就好了

必需屬性

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

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>

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

launch和attach都支持的屬性

skipFiles

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

trace

開啟trace后

launch支持的屬性

args

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

cwd

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

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

這個(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" ??????} ????} ??] }

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>