• 【转】VSCode 调试 Node.js 介绍


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

  • 相关阅读:
    ubuntu配置jdk(收藏)
    ubuntu学习笔记-tar 解压缩命令详解(转)
    URL编码以及GET和POST提交乱码解决方案 (转)
    maven模块开发(转)
    Spring定时任务配置
    java调用webservice
    struts2 JSON 插件的使用
    Java 基础知识点滴(1)
    vscode语法报错
    无法加载文件 .ps1,因为在此系统中禁止执行脚本
  • 原文地址:https://www.cnblogs.com/chriskwok/p/12605805.html
Copyright © 2020-2023  润新知