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 ...
随机推荐
- HTML5七巧板canvas绘图
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 初识layer遮罩层
背景:楼主做了一个先删除数据再插入的功能,但是狂点菜单的时候会有重复数据插入进来,设置字段unique之后,再狂点,控制台也会报错. 为了防止这种问题出现,我采取了制止”狂点“这种行为出现的做法,所以 ...
- STM32F10x_SPI(硬件接口 + 软件模拟)读写Flash(25Q16)
推荐 分享一个大神的人工智能教程.零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到人工智能的队伍中来! http://www.captainbed.net/strongerhuang Ⅰ.写在前 ...
- PHP——smarty模板(做登录页面和主页面)
denglu.php <?php include "init.inc.php"; $smarty->assign("action","ma ...
- Iptables规则执行顺序详解
1.The first is the mangle table which is responsible for the alteration of quality of service bits ...
- python之函数cmp
cpm函数是内置函数.可直接调用. cmp(x,y) 函数用于比较2个对象,如果 x < y 返回 -1, 如果 x == y 返回 0, 如果 x > y 返回 1. 但是,sorted ...
- ubuntu14.04安装pycurl
一. 安装依赖项 sudo apt-get install libcurl4-gnutls-dev 二. 安装pycurl pip install pycurl 三. 检验是否安装成功 进入pytho ...
- Aop检查Session,全局过滤器和No全局过滤器
全局过滤器: using System; using System.Collections.Generic; using System.Linq; using System.Web; using Sy ...
- 一个事半功倍的c#方法 动态注册按钮事件
前几天在网上看见一个制作计算器的c#程序,其中有一个动态注册按钮事件,觉的很有用.于是实际操作了一哈, 确实比较好. 言归正传,下面就来讲讲怎样动态注册按钮事件. 首先,我们需要设置变量来获取点击一个 ...
- ChemDraw的“键”工具的作用是什么
ChemDraw的“键”工具在化学研究中能够发挥重大作用,如果你也是一名化学相关工作者就千万不要错过这篇教程,下文详细盘点“键”工具究竟能干些什么. ChemDraw化学软件免费获取地址:http:/ ...