Visual Studio Code 配合 Node.js 轻松实现JS断点调试
一直喜欢vscode这个编辑器,今天看在liaoxuefeng.com学习nodejs时,看到上面
讲了使用vscode配合nodejs调试JS代码,原来这么简单,现在分享如下:
本人环境:
- Visual Studio Code 1.14.2
- Node.js 6.11.2
- Windows10 64位
上述两个软件都非常容易安装,基本上就是官网下载安装包,双击安装即可。
配置步骤
步骤1
新建个文件夹比如test,在里面放一个JS文件比如hello.js,把这个文件假拖放到vscode
窗口中打开,在里面随便写一点测试代码,完成后像下面这样

步骤2
点击左边第4个虫子按钮(Debug),这时候看到左上角三个小图标,其中绿色小三角表示开始调试,
接着是打开调试配置文件,打开输出窗口

步骤3
点击齿轮小图标打开launch.json文件,如果出现让你选择运行环境,直接选nodejs(电脑里需
装有nodejs才行),如果你使用的vscode版本大于等于我的版本,无需对launch.json进行更改,
保持默认即可。我的launch.json配置文件如下。

可以在项目目录看到vscode自动新建了1个
.vscode文件夹,里面放有launch.json文件
如果使用的vscode版本比我的低,可能需要对launch.json文件进行修改,具体可以参考:
liaoxuefeng.com 网站上的教程
步骤4
配置好launch.json之后,直接单击绿色小三角图标JS文件就运行了。这时候应该会自动弹出
输出窗口,如果没有可以手动打开输出窗口查看结果。

每次运行完毕最好点击红色小方块结束运行
点击代码编号左边的空白,即可启动断点调试
Visual Studio Code 配合 Node.js 轻松实现JS断点调试的更多相关文章
- 用Visual Studio Code写Node.j
介绍 vsc的宣传语是: 一个运行于 Mac OS X.Windows和 Linux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器. 按它说的,vsc特别适合来作为前端开发编辑器. 内 ...
- 用Visual Studio Code写Node和调试代码
介绍 vsc的宣传语是: 一个运行于 Mac OS X.Windows和 Linux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器. 按它说的,vsc特别适合来作为前端开发编辑器. 内 ...
- 总结在Visual Studio Code创建Node.js+Express+handlebars项目
一.安装node.js环境. Node.js安装包及源码下载地址为:https://nodejs.org/en/download/ 32 位安装包下载地址 : https://nodejs.org/d ...
- 总结在Visual Studio Code运行node.js项目遇到的问题
一.cannot find module “lodash” 项目运行时出现以下错误: Error: Cannot find module 'lodash' at Function.Module._re ...
- Visual Studio Code - 调试 Node.js 代码
官方的文档写的太好了!大家还是看参考资料吧. 参考资料: Debugging in Visual Studio Code Debug Node.js Apps using Visual Studio ...
- Nodejs in Visual Studio Code 04.Swig模版
1.开始 设置Node_Global:npm config set prefix "C:\Program Files\nodejs" Express组件:npm install e ...
- Nodejs in Visual Studio Code 01.简单介绍Nodejs
1.开始 作者自己:开发人员,Asp.Net , html / js , restful , memcached , oracle ,windows , iis 目标读者:供自己以后回顾 2.我看No ...
- crossplaform---Nodejs in Visual Studio Code 04.Swig模版
1.开始 设置Node_Global:npm config set prefix "C:\Program Files\nodejs" Express组件:npm install e ...
- crossplatform---Nodejs in Visual Studio Code 01.简单介绍Nodejs
1.开始 作者自己:开发人员,Asp.Net , html / js , restful , memcached , oracle ,windows , iis 目标读者:供自己以后回顾 2.我看No ...
随机推荐
- iOS开发中如遇到频繁的Http请求,取消之前已经发送的Http
主要精髓在于 第一点:不要initialize a new AFHTTPSessionManager object everytime 一定要把manager用成全局的 第二点:把请求返回的task对 ...
- hive2.1.1配置
hive2.1.1配置 首先在conf下复制hive-site.xml <property> <name>javax.jdo.option.ConnectionURL</ ...
- Webdings 图形字体
如果想在网页上插入图形,最简单的方式就是使用图形字体.Webdings 是一种微软开发的图形字体,在IE浏览器上可以使用它. 什么是Webdings Webdings 是一个TrueType的ding ...
- C语言 百炼成钢26
/* 题目62: 有一下特征字符串"eerrrrqqAB33333ABa333333ABjsfdsfdsa" 编写一个业务函数, 实现功能1:实现按照子串"AB" ...
- Python 数据库连接池
python编程中可以使用pymysql进行数据库连接及增删改查操作,但每次连接mysql请求时,都是独立的去请求访问,比较浪费资源,而且访问数量达到一定数量时,对mysql的性能会产生较大的影响.因 ...
- 请写出一段表单提交的HTML代码,表单名称为form1,提交方式为post,提交地址为submit.asp
请写出一段表单提交的HTML代码,表单名称为form1,提交方式为post,提交地址为submit.asp 解答: <form name=”form1” method=”post” action ...
- 【VBA】制作散点图及打标签VBA
1.散点图的制作必须只选择xy轴对应的数据,不能选中标签. 2.调整xy轴交叉点,改为四个象限. 3.通过菜单移动散点图到新表. 4.运行宏,打上文本标签. VBA如下 Sub AttachLabel ...
- 【python】函数参数-任意参数
def min1(args): res=args[0] for arg in args[1:]: if arg<res: res=arg return res def min2(first,re ...
- opencv2.4.9+VS2010配置
opencv2.4.9 https://pan.baidu.com/s/15b5bEY65R4CptayEYVAG4A 安装包路径:D:\文件及下载相关\文档\Tencent Files\845235 ...
- 浏览器配置工具.bat
在Web安装的ActiveX控件,默认安装在C:\WINDOWS\Downloaded Program Files目录下,但是有时候由于Internet Explorer的安全设置,会阻止Active ...