详解如何在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 相关文章推荐
jquery isEmptyObject判断是否为空对象的函数
Feb 14 Javascript
原生javascript实现图片按钮切换
Jan 12 Javascript
浅谈$(document)和$(window)的区别
Jul 15 Javascript
图解JavaScript中的this关键字
May 28 Javascript
json对象与数组以及转换成js对象的简单实现方法
Jun 24 Javascript
js利用clipboardData实现截屏粘贴功能
Oct 12 Javascript
js 判断登录界面的账号密码是否为空
Feb 08 Javascript
Node.js使用cookie保持登录的方法
May 11 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 Javascript
vue项目持久化存储数据的实现代码
Oct 01 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
php 常用字符串函数总结
2008/03/15 PHP
php 计划任务 检测用户连接状态
2012/03/29 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
JavaScript 私有成员分析
2009/01/13 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
PHP中CURL的几个经典应用实例
2015/01/23 Javascript
使用AOP改善javascript代码
2015/05/01 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
2015/06/08 Javascript
总结十个Angular.js由浅入深的面试问题
2016/08/26 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
vue中component组件的props使用详解
2017/09/04 Javascript
JavaScript实现打印星型金字塔功能实例分析
2017/09/27 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
2017/12/29 Javascript
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
jQuery pagination分页示例详解
2018/10/23 jQuery
package.json配置文件构成详解
2019/08/27 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
python合并文本文件示例
2014/02/07 Python
Python实现一个简单的MySQL类
2015/01/07 Python
Python决策树分类算法学习
2017/12/22 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
浅谈PyTorch中in-place operation的含义
2020/06/27 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
Django3中的自定义用户模型实例详解
2020/08/23 Python
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
MVMT手表官方网站:时尚又实惠的高品质手表
2016/12/04 全球购物
How TDD works
2012/09/30 面试题
家长对学生的评语
2014/04/18 职场文书
竞选演讲稿范文大全
2014/05/12 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫