本篇文章給大家介紹一下試模式的必要性,聊聊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了
選項(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è)終端.
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ì)修改.
屬性名 | 含義 | 屬性值示例 |
---|---|---|
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>
選中某一個(gè), 然后可以使用快捷鍵f5, 快速啟動(dòng), 或者點(diǎn)擊運(yùn)行圖標(biā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后
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拿到
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>