详解如何在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 相关文章推荐
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
Nov 27 Javascript
js实现页面打印功能实例代码(附去页眉页脚功能代码)
Dec 15 Javascript
IE6不能修改NAME问题的解决方法
Sep 03 Javascript
jquery实现图片按比例缩放示例
Jul 01 Javascript
编写高性能Javascript代码的N条建议
Oct 12 Javascript
jQuery添加和删除输入文本框标签代码
May 20 Javascript
JavaScript中日常收集常见的10种错误(推荐)
Jan 08 Javascript
微信小程序 下拉列表的实现实例代码
Mar 08 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
Mar 14 Javascript
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
在vue项目中使用sass语法问题
Jul 18 Javascript
vue-cli设置css不生效的解决方法
Feb 07 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 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
PHP实现链式操作的核心思想
2015/06/23 PHP
php中Swoole的热更新实现代码实例
2021/03/04 PHP
关于Blog顶部的滚动导航条代码
2006/09/25 Javascript
简单JS代码压缩器
2006/10/12 Javascript
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
jquery $(document).ready() 与window.onload的区别
2009/12/28 Javascript
菜鸟javascript基础资料整理3 正则
2010/12/06 Javascript
JQuery中getJSON的使用方法
2010/12/13 Javascript
js图片向右一张张滚动效果实例代码
2013/11/23 Javascript
一个不错的仿携程自定义数据下拉选择select
2014/09/01 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
2015/11/04 Javascript
javascript产生随机数方法汇总
2016/01/25 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
Python中的异常处理学习笔记
2015/01/28 Python
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
Python脚本实现自动将数据库备份到 Dropbox
2017/02/06 Python
python实现简单的单变量线性回归方法
2018/11/08 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
解决启动django,浏览器显示“服务器拒绝访问”的问题
2020/05/13 Python
使用Python将xmind脑图转成excel用例的实现代码(一)
2020/10/12 Python
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
师范毕业生自我鉴定
2014/01/15 职场文书
幼儿运动会邀请函
2014/01/17 职场文书
学生安全责任书范本
2014/07/24 职场文书
军训新闻稿范文
2015/07/17 职场文书
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android