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 中下载好的电影…

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…

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…

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

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

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

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

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

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

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

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

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

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

静态常量放在什么包里面_在沙雕游戏里面用表情包打架,是一种什么体验

在日常的聊天中,不少人都会随手发一些表情包表达自己的心情,其中就有不少是动物的表情包。早些时候,推特上曾经流行过一些沙雕的动物表情包,大多数都是通过视觉上的误差,许多网友发挥自己丰富的想象力,让这…

场内场外交易成本_选择场内基金还是场外基金,看这篇文章就够了

基金按照买卖的渠道可分为场内基金和场外基金。有的喜欢购买场内基金,有的喜欢购买场外基金,我自己就喜欢购买场内基金。这两种基金究竟怎么选择呢?从三方面一一为你道来。一、场内、场外基金的不同1、交易渠道不同这是最简单区分场内基金和场…

祖孙俩人是什么关系_一个人生活也挺好,为什么还需要亲密关系?

专注女性自我蜕变和解放,愿你面向太阳,坚定而温暖。现在很多90后,都谈婚色变,都更多的想要一个人生活,觉得生活没有压力,自己不饿,全部搞定,也有亲情和友情,也可以享受恋…

4t硬盘实际容量是多少_SMR硬盘到底能用不?点进来看看避免踩雷

***身处信息时代,随着网络带宽的增加,游戏容量越做越大,网上的高清片源也动辄几十G,再加上各种零零碎碎的学习资料,这时候电脑标配的1T、2T机械硬盘的容量就有点捉襟见肘了。越来越来多的个人用户开始组起了家庭NAS(网…

计算机进去bios方式,各种电脑进入BIOS方法汇总|进入bios的方法大全

【各种电脑进入Bios设置的方法】如今我们已经很少上电脑店去让别人给我升级或者安装系统,我们只要借助网络上的教程就可以完成系统的更新了。但是通过光盘,u盘等手段安装系统,都需要进行BIOS设置,主要是选择开机启动项。而且各种电…

xp系统怎么关闭wmi服务器,WinXP系统如何启用WMI服务,小编教你WinXP系统如何启用WMI服务...

WMI服务是干什么用的?网友发问了。WMI用来生成组织和管理系统信息的工具,使系统管理人员能够更密切的监视系统活动。基于WMI的管理系统的使用带来了更可靠的计算环境和更高的系统可靠性。那么WinXP系统如何启用WMI服务?下面,小编给…

demo_ajax_json.js,ajax小demo-----ajax中json的使用

使用简单例子,表单的的输入,将表单输入以JSON的形式传入,并后台返回JSON格式,使用js函数处理,进行显示,进一步熟悉了ajax的用法,以及JSON的的使用。例子如下:html部分:用…

摆胯教学分解_聚十年求索,筑理想课堂——厦门市梧侣学校十周年庆区级教学小学数学(数与形)...

寒来暑往,秋收冬藏。养精蓄锐是为了走更远的路,厚积薄发是为了更好地前行。梧侣十年,不忘初心,砥砺奋进。梧侣十年,不忘初心,昂首阔步。十年来,学校始终秉承朱永新的新教育理念,致力…