Chr☆s Kwok 的技术笔记

.NET, C#, WPF, WCF, WF, .NetCore & LINQ ... I know how it works because I know why it works ...

博客园 首页 新随笔 订阅 管理

VScode除了out-of-box支持JavaScript和TypeScript,还支持Node.js调试,简直就是为前端工程师而生的,对不对

要调试Node.js的前提是,你的电脑上已经安装了Node.js的环境。

什么?怎么安装Node.js?给你一点小提示:打开百度,搜索【安装Node.js】,好了,不能提示更多了。

本文以调试express应用为例,并假设您已经安装好了Node.js运行环境。

创建express应用

我们使用express-generator创建一个新的express应用。

1.在全局安装express-generator

a.打开终端,输入: npm install express-generator -g MacBook用户全局安装的时候记得在前面加上sudo

b.安装完成之后,在终端输入 express -v 如果看到下图所示的信息,说明已经安装成功了。

 

2.生成express应用目录,假设这个应用的名称为myapp 在终端输入 express myapp 在当前目录就生成了一个myapp目录,目录结构如下:

可以看到,这个小应用已经五脏俱全,有Node服务器配置,公共资源文件夹,视图文件夹,以及路由配置。

3.运行express应用

a.在终端中输入指令(在Node.js command prompt窗口)

cd myapp && cnpm install

就可以进入项目目录并安装所有依赖,这一步可能需要比较长的时间,耐心等待安装完成。

b.然后输入指令

cnpm start

就可以启动应用。

这时我们在浏览器中访问localhost:3000,即可看到如下页面:

这就说明express应用可以正常运行,接下来我们就可以使用VScode调试代码了

提示:为了避免调试时的端口冲突,我们先回到刚刚运行express应用的终端,ctrl+c关闭正在运行的express应用。

调试express应用

1.进入VScode界面,点击界面左边的第四个类似虫子的按钮,进入调试界面(点击页面上方“没有配置”下拉菜单,选择“添加配置”):

2.选择Node.js环境。

3.选择完成之后,在项目的根目录中会生成一个.vscode的目录,这个目录中存放了各种各样的VScode编辑器的配置。现在这个目录中就包含了一个文件名为lanuch.json的配置文件,配置文件的内容如下:

其中最重要的配置项就是“Program”字段,这个字段定义了整个应用的入口,开启调试器的时候会从这个入口启动应用。

我们发现当前这个字段已经有值了,不要慌,那是因为VScode在初始化这个配置文件的时候,会查看package.json中是否有包含了键名为start的scripts,如果有的话,就会把start配置的内容作为“program”字段的值。

4.点击开始调试按钮(绿色三角形),就可以开始调试。这时界面上方就会出现一个调试控制的面板,页面右下方会出现一个调试控制台,可以查看你输出的信息,在界面下放会出现一个状态栏,当前的橘黄色表示应用在正常运行,如下图所示:

 

posted on 2020-03-31 15:59  Chr☆s  阅读(428)  评论(0编辑  收藏  举报