html文件设置断点调试,断点调试

断点调试

使用 ES2015+ 特性来开发 Node.js 项目可以带来巨大的便利,但同时由于有些特性现在还不支持,需要借助 Babel 编译,运行的代码实际上是编译后的代码,这样给调试带来很大的麻烦。

ThinkJS 从 2.2.0 版本开始支持断点调试源代码,同时如果运行时出现报错,错误也是定位到源代码下。

使用 node-inspector 断点调试

安装 node-inspector

可以通过 npm install -g node-inspector 来全局安装 node-inspector,如果是在 *unix 系统下,需要在命令前面添加 sudo 执行。

启动 node-inspector 服务

通过命令 node-inspector & 来启动 node-inspector 服务。

启动 Node.js 服务

使用 node --debug www/production.js 来启动 Node.js 服务。

这里跟之前启动服务有些区别,由于启动时需要添加 --debug 参数,所以不能用 npm start 来执行启动了。

调试

访问 http://127.0.0.1:8080/debug?port=5858,会出现调试页面。

然后在 app 目录下找到对应的编译后的文件,在对应的地方加上断点(这里一定要是在 app/ 目录,不能是源代码 src/ 目录),如:

e50df5969c61a186bb26bc99ab53c5d8.png

然后新建标签页,访问对应的接口。这时候页面会一直卡在那里。这时候返回 node-inspector 的标签页,会看到内容已经跳到 ES2015+ 的代码,如:

ea2effe600a4dffc0cb266bf20831798.png

然后就可以利用后侧的断点工具进行调试了。

0d9dad4bc5af32ad300b54a731a94ba5.png

在 VS Code(v1.7+) 下断点调试

打开项目

通过 VS Code 菜单 File -> Open 来打开 ThinkJS 2015+ 项目,如:

bb3dd17be1d095a7dd800b17d04b2103.png

设置调试配置

点击左侧的调试菜单,点击上面的调试按钮,会调试选择的环境,选择 Node.js。如:

cb6be7090762c5584d41d5c2c52da080.png

选择 Node.js 后,会生成一个 launch.json 文件。修改里面的配置,将 sourceMaps 值改为 true(注意:有 2 个 sourceMaps key,都修改)。

编辑配置为

{

// Use IntelliSense to learn about possible Node.js debug attributes.

// Hover to view descriptions of existing attributes.

// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387

"version": "0.2.0",

"configurations": [

{

"type": "node",

"request": "launch",

"name": "启动程序",

"program": "${workspaceRoot}\\www\\development.js",

"cwd": "${workspaceRoot}",

"sourceMaps": true,

"outFiles": [

"${workspaceRoot}/app/**"

]

},

{

"type": "node",

"request": "attach",

"name": "附加到进程",

"port": 5858

}

]

}

即:修改program配置,添加sourceMaps和outFiles配置。

启动服务

点击上面的调试按钮来启动服务。如果已经在命令行启动了 Node.js 服务,需要关掉,否则会因为端口被占用导致错误。

9c77b8b195ab4aca7d02ce32b2b7e24f.png

开始调试

回到代码模式,在 app/ 目录下的文件里加上断点(一定要是在 app/ 目录下的文件,不能是 src/ 下的文件)。

在源码中直接添加断点即可调试。

访问对应的页面,就可以看到代码显示的已经是源代码了,然后利用顶部的调试按钮就可以调试了。如:

2ec4d7df1eedd901519e95a80e67136e.png

这样就可以很好的在 VS Code 下调试 ES2015+ 代码了。

在 WebStorm 下断点调试

配置 WebStorm

将新建的 ThinkJS 2015+ 项目导入到 WebStorm 中,然后在首选项的 JavaScript 版本设置为 ECMASCRIPT 6。如:

934960d609dae3a7d6420965d9c863e3.png

点击右上角的 Edit Configurations,然后新建个项目,项目类型选择 Node.js。如:

611e69bad41026459bec18f41a4e1410.png

在右侧配置项 JavaScript File 里填入 www/development.js,或者通过右侧的按钮选择也可以。如:

fbb125559360f4cb9841544a304d8aab.png

调试

点击右上角的调试按钮,会启动 Node.js 服务。如:

d5703e15bafe2b11e18ae34cddc105d3.png

86743929155721eca9c6da503b028654.png

如果之前已经在命令行下启动了服务,需要关掉,否则会出现端口被占用导致报错的情况。

在 app/ 目录下的文件设置断点(一定要在 app/ 目录下,不能是 src/ 目录下),如:

51b3670c964cb89f5b9a446fbc11552c.png

打开浏览器,访问对应的接口。返回 WebStorm,点击调试按钮就可以进行调试了,并且看到的是源代码。

81c73229ef39e43f649e4e9ec4516acc.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/527850.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

html如何太假icon图标,CSS3 icon font完全指南(CSS3 font 会取代icon图标)

为什么要将icon做成字体?在很多网站项目中,我们常常会用到各种透明小图标,然后网站要兼容各个浏览器,也可能会有多个尺寸,甚至还要考虑换肤等需求。那么我们就要将这些小图标输出为多种尺寸、颜色和文件格式&#xff0…

html5 video 直播流无声音,【报Bug】html5plus 使用 VideoPlayer 播放部分rtmp没有声音

详细问题描述[内容]使用 html5plus 使用 VideoPlayer 播放流媒体,播放m3u8格式正常,但rtmp格式部分有问题。希望官方能确认是否是html5plus自身的缺陷呢,是否对某些编码类型的rtmp不支持?1、比如社区之前出现过的湖南卫视rtmp&…

kodi android 目录,Kodi添加本机和电脑上的电影视频、音乐、图片目录教程

很多人都想在家看电影时能享受到电影院的那种大屏快感,Kodi正是这样的一款强大的家庭影院影音播放中心!不过有些用户对它的使用不是很了解,我们一起来学习一下。使用Kodi你可以非常方便地在客厅的 Kodi 中播放寝室电脑里或 NAS 中下载好的电影…

html5 电流效果,在HTML5 Canvas 2D上绘制云雾中的电流动画特效

JavaScript语言:JaveScriptBabelCoffeeScript确定ctrl {numParticles: 35,maxRadius: 80,hue: 220,hueRange: 15,fade: 0.36,halo: true,zappy: true,zapComplexity: 1}var gui new dat.GUI();gui.add(ctrl, numParticles, 1, 150).step(1);gui.add(ctrl, maxRadi…

2021深圳各中学高考成绩查询,深圳四大高中在2021年高考深一模的前500名分布数据...

看到深圳四大高中在2021年高考深一模的前500名分布数据:深圳中学名列前茅,前500名中占166席,且文科、理科第一名均来自深中;物理方向前10名中深中6人,实验3人;历史方向前10名中深中3人。深圳实验学校高中部有84人进入前…

微型计算机各部件之间通过总线传递各种信息,2015年9月计算机一级考试基础及MSOffice应用选择真题...

一、选择题(每小题1分,共20分)1、控制器的主要功能是 .A.指挥计算机各部件自动、协调地工作B.对数据进行算术运算C.进行逻辑判断D.控制数据的输入和输出2、下列度量单位中,用来度量CPU时钟主频的是 .A.MB&a…

土木工程计算机仿真学科未来前景,同济大学土木工程学院土木工程计算机仿真2010级学历教育硕士--培养方案...

一、简介土木工程计算机仿真学科是土木工程属下的二级学科,在国民经济建设中有着重要的地位,在促进城市建设、社会发展过程中做出了重大贡献。土木工程计算机仿真是同济大学于2005年自主设立的二级学科,虽然设立时间不长,但取得的…

html推箱子怎么清除走过的,第九讲:HTML5该canvas推箱子原型实现

动body{margin:0px;padding:0px;}#main{margin: 100 auto 0 auto;border: 10px solid #030303;300px;height:460px;border-radius:10px;}var canvas document.getElementById(mc);var cxt canvas.getContext(2d);//定义背景的颜色function init_background(){cxt.fillStyle …

大学计算机要学多久,大学刚开学要不要带电脑?很多人都很后悔,学长学姐把经验告诉你...

大学刚开学要不要带电脑?很多人都很后悔,学长学姐把经验告诉你文/小川说车况大学刚开学,学生们要不要带电脑呢,想必这个问题一直对还没进入大学的准大学生来说很困扰,一方面既担心在学校里面用电脑的时候不方便&#x…

西南医科大学计算机应用基础历年真题,网络选修课-计算机应用基础-期末考.docx...

1 单选 (1 分)Outlook 数据文件的扩展名是().A..patB..datC..ptsD..dll正确答案: A2Windows 系统中 ,若 2 个纯文本文件分别包含100 和 200 个英文字符 ,下列关于它们占用磁盘空间大小的说法中,正确的是 ().A.前者大于后者B.不确定 C.后者大于前者D.两者相等正确答案…

html自定义js程序,JS中微信小程序自定义底部弹出框

实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文。htmlCSS.commodity_screen {width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: #000;opacity: 0.2;overflow: hidden;z-index: 1…

怎么知道自己是否适合计算机专业,事实:我怎么知道我的旧计算机是否适合win7或win10?...

实际上,win10并不大!只是对内存和硬盘的要求更高!根据官方的最低操作要求,硬件要求如下:1、[处理器]:Win10系统的安装要求计算机的处理器以不低于1GHz的速度运行2、[运行内存]:Win10 32位操作系…

html5 canvas ios限制,HTML5画布的drawImage比错误的iOS(HTML5 Canvas drawImage ra

我想调整从iOS相机上使用HTML5画布客户端拍摄的图像,但我一直在这个奇怪的错误,这错误的图像有一个错误的比率,如果运行超过〜1.5MB大它的工作原理在桌面上,但不是在最新的iOS版本,媒体上传API。:你可以在这…

金工如何运用计算机思维,金工实训心得体会

金工实训心得体会我们有一些启发后,就很有必要写一篇心得体会,如此可以一直更新迭代自己的想法。那么心得体会到底应该怎么写呢?以下是小编为大家整理的金工实训心得体会,希望能够帮助到大家。金工实训心得体会1时间过得真快&…

湖南女子学院 计算机,2019湖南女子学院专业排名

湖南女子学院的前身是成立于1985年的湖南女子职业大学,2010年3月18日经教育部批准升格为全日制普通本科院校。截止到目前为止,湖南女子学院重点专业共有1个专业,其中国家品牌专业0个,省部重点专业1个。下面是学习啦小编给大家带来…

2020计算机考研只考数据结构的学校,【择校必看】十三所计算机专业课只考数据结构的985院校!...

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼敲黑板:本文涉及到的学校计算机专业考研只考数据结构,其中部分院校同时也会考算法、C语言等相关内容。但是,相对其他几门,无疑在专业课的复习上大大降低了难度。如果各位同学目前的专…

福州3 2五年制计算机专业的学校,福州有哪些五年制大专

福州的五年制大专有福州环保职业中专学校、福建工业学校、福建理工学校、福建经济学校、福建建材工业学校、福建商贸学校、福州电子职业中专学校、福建化工学校、福建工贸学校、福州文教职业中专学校、福建经贸学校、福州商贸职业中专学校、福州工业学校、福州建筑工程职业中专…

无法删除计算机文件是什么意思,为何计算机的文件删除不了,说是被占用要解除占用...

要解决此问题,必须关闭“简单文件共享”,然后获取文件夹的所有权:1. 关闭“简单文件共享”:a. 单击“开始”,然后单击“我的电脑”。b. 在“工具”菜单上,单击“文件夹选项”,然后单击“查看”选…

石家庄计算机专接本学校有哪些,河北省内的专接本学校都有哪些?

满意答案mary3978702013.02.28采纳率:41% 等级:13已帮助:9063人防灾技术高等专科学校河北工程技术高等专科学校保定师范专科学校承德民族师范高等专科学校保定金融高等专科学校承德石油高等专科学校沧州师范专科学校沧州医学高等专科学校邢…

计算机原理转移指令题,转移指令计算机原理.pdf

转移指令计算机原理.pdf 3.3.5 程序控制指令程序控制指令 程序控制指令又称为控制转移指令,包括转移指令、循环控制指令、过程调用指令和 中断指令 4 类。转移指令又分为无条件转移指令和条件转移指令。 1无条件转移指令无条件转移指令 JMP 计算机程序的执行完全按照…