vscode 调试 node.js的方法步骤
引言
作为前端工程师经常打交道的开发工具无非IDE编辑器和Chrome,在Chrome中调试是非常方便的,直接在开发者工具的source栏打断点就可以了。那么,如果遇到需要写node相关的代码,比如webpack配置项,应该怎么调试来实现我们的需求呢?
VSCode配置
在VSCode中单独有debug的菜单,需要指定launch.json文件,该文件为VSCode提供启动调试所需的各项配置。
//launch.json //使用IntelliSense了解相关属性。 //悬停以查看现有属性的描述。 //欲了解更多信息,请访问:https://go.microsoft.com/fwlink/?linkid=830387 { "version":"0.2.0", "configurations":[ { "type":"node", "request":"launch", "name":"LaunchviaNPM", "runtimeExecutable":"npm", "runtimeArgs":["run-script","debug"], "cwd":"${workspaceFolder}/envloader/mobile", "port":9229 } ] }
上面是我们项目的调试配置,runtimeExecutable指明调试方式是npm方式,runtimeArgs为执行调试传的参数,cwd指定工作目录。
//package.json "scripts":{ "debug":"node--max_old_space_size=12288--inspect-brknode_modules/webpack/bin/webpack.js--configbuild/webpack.dev.js--watch" },
注意debug脚本要传入--inspect-brk,这样才可以开启node的调试功能。
VSCode调试菜单点击执行按钮,我们就可以愉快的调试webpack.dev.js代码了。
可以看到,webpack内部的数据结构尽收眼底。
Chrome开发者工具风格
刚才的launch.json中,有port:9229这个属性,我们可以在浏览器访问chrome://inspect,就能以我们熟悉的chrome风格来调试node程序了。
总结
调试程序能够帮助我们对代码有更深刻的了解,能够提供运行时的执行上下文、调用栈等信息。此外,在调试线上混淆后的代码时,对各种a、o、f等难以理解的变量名参数名也能通过运行时的变量数据轻易分析出代码的基本逻辑。
到此这篇关于vscode调试node.js的方法步骤的文章就介绍到这了,更多相关vscode调试node.js内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票!
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。