详解如何在vscode里面调试js和node.js的方法步骤


Posted in Javascript onDecember 24, 2018

在开发的过程中,几乎不可能一次性就能写出毫无破绽的程序,断点调试代码是一个普遍的需求。

作为前端开发工程师,以往我们开发的JavaScript程序都运行在浏览器端,利用Chrome提供的开发者工具就可以方便的进行源码断点调试。其步骤有四,详情不表,粗略概括如下:

1.打开Chrome开发者工具;
2.点击进入Sources标签页,在页面的左侧就能看到JS代码的目录;
3.找到需要设置断点的源文件,在需要中断的哪行代码左侧单击鼠标左键,就可以设置断点,如果你的代码是uglify过的,则需导入相应的source-map来映射源码。
4.刷新页面(如果设置断点的位置是一个事件处理函数,则直接触发这个事件即可),代码运行到断点处的时候,程序就会挂起,这时候用鼠标hover就可以查看当前各个变量的数值,并以此判断程序是否正常运行了。

但是,当我们用JavaScript开发运行在服务端的Node.js程序时,Chrome开发者工具暂时派不上用场了。虽然也有办法实现在Chrome上调试,不过这不是今天我们讨论的范围。

还有,说用console.log的那位同学,请你先不要说话…

实际上,许多IDE都集成了Debug的功能,包括较新版本的WebStorm就对Node.js调试支持得很好。

但是很多开发人员会觉得IDE太重,有没有更轻量级一些的工具来实现断点调试呢?今天就要给大家安利一下在VScode上进行断点调试的方法。

一般大家调试都是在浏览器端调试js的,不过有些时候也想和后台一样在代码工具里面调试js或者node.js,下面介绍下怎样在vscode里面走断点。

1,用来调试js

一:在左侧扩展中搜索Debugger for Chrome并点击安装:

详解如何在vscode里面调试js和node.js的方法步骤

二:在自己的html工程目录下面点击f5,或者在左侧选择调试按钮

详解如何在vscode里面调试js和node.js的方法步骤

,在上方

详解如何在vscode里面调试js和node.js的方法步骤

,选择下拉按钮,会有一个添加,选择chrome

详解如何在vscode里面调试js和node.js的方法步骤

3:之后会出现laungh.json的配置文件在自己的项目目录下面

详解如何在vscode里面调试js和node.js的方法步骤

4:不过对于不同的代码文件要调试的话,每次都需要修改一下配置文件

{
  "version": "0.2.0",
  "configurations": [{
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceRoot}"
    },
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Chrome",
      "port": 9222,
      "webRoot": "${workspaceRoot}"
    },
    {
      "name": "Launch index.html (disable sourcemaps)",
      "type": "chrome",
      "request": "launch",
      "sourceMaps": false,
      "file": "${workspaceRoot}/jsTest/test1/test1.html" #每次需要修改这里的文件地址
    }
  ]
}

5:到这里就可以进行调试了,在

详解如何在vscode里面调试js和node.js的方法步骤

中选择 Launch index.html (disable sourcemaps) 调试项,按f5调试,会出现,同时打开goole浏览器,点击

详解如何在vscode里面调试js和node.js的方法步骤

,即可进入调试阶段

2,用来调试node.js

调试nodejs有很多方式,可以看这一篇 https://blog.risingstack.com/how-to-debug-nodej-js-with-the-best-tools-available/,

其中我最喜欢使用的还是V8 Inspector和vscode的方式。

在vscode中,点击那个蜘蛛的按钮

详解如何在vscode里面调试js和node.js的方法步骤

就能看出现debug的侧栏,接下来添加配置

详解如何在vscode里面调试js和node.js的方法步骤

选择环境

详解如何在vscode里面调试js和node.js的方法步骤

就能看到launch.json的文件了。

详解如何在vscode里面调试js和node.js的方法步骤

启动的时候,选择相应的配置,然后点击指向右侧的绿色三角

详解如何在vscode里面调试js和node.js的方法步骤

launch模式与attach模式

{
 "version": "0.2.0",
 "configurations": [
  {
   "type": "node",
   "request": "launch",
   "name": "Launch Program",
   "program": "${workspaceRoot}/index.js"
  },
  {
   "type": "node",
   "request": "attach",
   "name": "Attach to Port",
   "address": "localhost",
   "port": 5858
  }
 ]
}

当request为launch时,就是launch模式了,这是程序是从vscode这里启动的,如果是在调试那将一直处于调试的模式。而attach模式,是连接已经启动的服务。比如你已经在外面将项目启动,突然需要调试,不需要关掉已经启动的项目再去vscode中重新启动,只要以attach的模式启动,vscode可以连接到已经启动的服务。当调试结束了,断开连接就好,明显比launch更方便一点。

在debug中使用npm启动

很多时候我们将很长的启动命令及配置写在了package.json的scripts中,比如

"scripts": {
 "start": "NODE_ENV=production PORT=8080 babel-node ./bin/www",
 "dev": "nodemon --inspect --exec babel-node --presets env ./bin/www"
},

我们希望让vscode使用npm的方式启动并调试,这就需要如下的配置

{
 "name": "Launch via NPM",
 "type": "node",
 "request": "launch",
 "runtimeExecutable": "npm",
 "runtimeArgs": [
  "run-script", "dev"  //这里的dev就对应package.json中的scripts中的dev
 ],
  "port": 9229  //这个端口是调试的端口,不是项目启动的端口
},

在debug中使用nodemon启动

仅仅使用npm启动,虽然在dev命令中使用了nodemon,程序也可以正常的重启,可重启了之后,调试就断开了。所以需要让vscode去使用nodemon启动项目。

{
 "type": "node",
 "request": "launch",
 "name": "nodemon",
 "runtimeExecutable": "nodemon",
 "args": ["${workspaceRoot}/bin/www"],
 "restart": true,
 "protocol": "inspector",  //相当于--inspect了
 "sourceMaps": true,
 "console": "integratedTerminal",
 "internalConsoleOptions": "neverOpen",
 "runtimeArgs": [  //对应nodemon --inspect之后除了启动文件之外的其他配置
  "--exec",
  "babel-node",
  "--presets",
  "env"
 ]
},

注意这里的runtimeArgs,如果这些配置是写在package.json中的话,就是这样的

nodemon --inspect --exec babel-node --presets env ./bin/www

这样就很方便了,项目可以正常的重启,每次重启一样会开启调试功能。

可是,我们并不想时刻开启调试功能怎么办?

这就需要使用上面说的attach模式了。

使用如下的命令正常的启动项目

nodemon --inspect --exec babel-node --presets env ./bin/www

当我们想要调试的时候,在vscode的debug中运行如下的配置

{
 "type": "node",
 "request": "attach",
 "name": "Attach to node",
 "restart": true,
 "port": 9229
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 可以拖动的DIV(二)
Jun 26 Javascript
Javascript Global对象
Aug 13 Javascript
JavaScript中变量提升 Hoisting
Jul 03 Javascript
location对象的属性和方法应用(解析URL)
Apr 12 Javascript
jQuery中toggleClass()方法用法实例
Jan 05 Javascript
基于JavaScript实现TAB标签效果
Jan 12 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
Jun 14 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 Javascript
JS组件系列之JS组件封装过程详解
Apr 28 Javascript
vue与原生app的对接交互的方法(混合开发)
Nov 28 Javascript
Vue.js实现大屏数字滚动翻转效果
Nov 29 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
Feb 17 Javascript
@angular前端项目代码优化之构建Api Tree的方法
Dec 24 #Javascript
微信小程序获取用户openid的实现
Dec 24 #Javascript
vue-router启用history模式下的开发及非根目录部署方法
Dec 23 #Javascript
小程序实现人脸识别功能(百度ai)
Dec 23 #Javascript
优雅的elementUI table单元格可编辑实现方法详解
Dec 23 #Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 #Javascript
JavaScript基于数组实现的栈与队列操作示例
Dec 22 #Javascript
You might like
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
PHP4中实现动态代理
2006/10/09 PHP
PHP stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
Laravel5.4简单实现app接口Api Token认证方法
2019/08/29 PHP
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
JavaScript OOP面向对象介绍
2010/12/02 Javascript
围观tangram js库
2010/12/28 Javascript
JS判断不能为空实例代码
2013/11/26 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
Angular.JS中select下拉框设置value的方法
2017/06/20 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
2018/03/13 Javascript
vue-cli3+typescript初体验小结
2019/02/28 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
Python实现list反转实例汇总
2014/11/11 Python
python实现查询苹果手机维修进度
2015/03/16 Python
python内存管理分析
2015/04/08 Python
详解django中使用定时任务的方法
2018/09/27 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
python如何写出表白程序
2020/06/01 Python
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
汽车驾驶求职信
2013/10/25 职场文书
大学生就业自荐信
2013/10/26 职场文书
军训口号
2014/06/13 职场文书
借钱欠条怎么写
2015/07/03 职场文书
导游词幽默开场白
2019/06/26 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers
MySQL基础(二)
2021/04/05 MySQL
解决Django transaction进行事务管理踩过的坑
2021/04/24 Python
JUnit5常用注解的使用
2021/07/02 Java/Android