使用得心应手的IDE来开发应用程序,可以使我们的工作事半功倍。而调试则更可以让我们准确的定位BUG,发现问题。
本文讲述如何使用 WebStorm 这个怪兽级JavaScript IDE来调试 Chat of Pomelo。
如果你更喜欢 Eclipse 等其他IDE,希望本文也可以有一些帮助。
前言
-
首先我们需要知道,NodeJS应用程序可以在运行命令中加入
--debug=5858
参数,可以使得NodeJS程序监听本地5858
端口,并开启调试模式。 -
其次,Pomelo的运行原理是:
pomelo start
时,启动了master
服务器,然后其先读取配置文件,再启动由game-server/config/servers.json
文件中经过配置的各个服务器进程。其中,你看到的id
、host
、port
等等都是子服务器的启动参数,这些参数都会放到启动命令行中app.js
的后面。 -
再次,Pomelo的设计人员最初已经考虑到了直接在
node
后app.js
前添加参数的简便方法:在服务器配置文件中,配置条目中插入"args": " 你想要的参数 "
后,便可以你指定的参数运行node
。
修改配置以启动带有调试模式的服务器
一、打开文件
打开game-server/config/servers.json
。为了便于便于开发,我们将服务器数目缩减至每功能1个运行实例。这样你就会看到:
二、修改并保存
我们对gate
服务器的负载分配原理产生了兴趣,想要调试它。这时,我们只需要在{"id": "gate-server-1", ...
的行末,花括号}
前,插入下面代码, "args": " --debug=32312 "
。使gate
服务器的配置组变成这样:
当再次启动服务器时,master
服务器会读取新的配置,并以这个配置运行gate-server-1
服务器。
而该服务器的进程,会监听32312
端口,以便调试器连接。将端口设置的偏高是为了减少端口冲突的可能性。开发过程中,如果启动后发现有报ADDRINUSE
(端口已被占用)的错误,请使用pomelo kill --force
杀光Pomelo程序,并调整此处的端口值。
配置IDE的调试器
一、打开Edit Configurations...
对话框
可以从运行、调试按钮前面的小三角进入,或者从工具栏中选择Run
- Edit Configurations...
。
二、新增一条Node.js Remote Debug
Name
栏名字可以随意起,但最好选择明确易懂的。然后选中Single instance only
,这样只会启动一个调试器。而不会有很多相同的调试器都连到后面指定的调试端口。
下面的Host
写本地127.0.0.1
,Debug Port
填入刚刚上面指定的端口号,我这里用32312
,与前面配置文件中的完全一致。Local directory
指定当前的game-server/app.js
目录所在目录。[补充:在webstorm 8 里面 没有 local directory 选项了,不设置页可以调试]
附:运行配置
当然你可能已经注意到了,这里的Configurations
不仅包含调试,还包括运行配置。运行配置方法跟一般的NodeJS程序配置方法相同。NodeJS新人可以参考图片中配置。注意被框的内容。
准备调试
一、分别启动Web、Chat服务器
如果你有做过运行Chat和Web服务器的配置,现在就可以从运行、调试按钮前面的配置下拉菜单中,分别选择Chat
以及Web
后,点击[►]运行按钮。运行后,可以从IDE下方的控制台输出中查看日志输出,可以检查一下这两个服务器的启动是否成功。如果出现红字,多半表示启动失败。你可以根据提示的报错信息Google或者 提交Issue ,以查找解决方案。
二、连接调试器
再从配置下拉菜单中选择刚刚的调试配置gate study
,之后点击[☼]调试按钮。检查窗口下方的Debugger
,可以看到有提示说Connected to 127.0.0.1:32312
。
三、设置断点
由于我们想调试gate
服务器中,与connector分配相关的代码,所以在IDE中,打开app/servers/gate/handler/gateHandler.js
。定位到 第30行 ,在此处下一个断点。
实践
浏览器中打开 http://127.0.0.1:3001/index.html 会看到 Chat of Pomelo
标题的登录页面。填入两栏表单后,点击【JOIN】按钮。
此时,页面将不会做出任何反应,是因为服务器端的代码被断点拦下了。而IDE会因为调试器而被激活:
下方窗口中,除了常规调试用到的StepOver、StepInto、StepOut等必须功能外,有很多好用的工具,比如即时表达式求值、切换异常发生时自动中断……这里就不深入探讨了。
可用的聊天应用
常识
Web服务器启动成功后我们可以看到它提示说可以访问http://127.0.0.1:3001/index.html
了。但我们都知道127.0.0.1是本机IP地址,如果真正要跟其他人“聊天”的话,这样是不行的。因为别人不一定能打开127.0.0.1:3001,即便打开了,也无法跟你在一起聊天。
所以将这里的127.0.0.1换成你自己电脑的可被网络上其他成员访问到的地址,我这里的地址是192.168.1.61
。OK,我可以在浏览器里打开http://192.168.1.61:3001/index.html
,因为本机调试没有任何问题,所以我也信心满满的将这个地址告诉了与我同一网络的同事。
发现问题
这时出现了一个问题,我自己可以登录到聊天界面,而其他任何人都无法登录。
根据其他人的浏览器Console输出,可以看到他们都连接一下192.168.1.61:3014
端口后,又去连接127.0.0.1:3050
,所以他们才无法登录的。
而3014
端口刚好是gate
服务器,问题就出在这里,还是继续调试一下吧。
在经过一番断点切换后,可以发现gateHandler.queryEntry
最后跑到了 第39行 的next
函数上。
var res = dispatcher.dispatch(uid, connectors);
next(null, {
code: 200,
host: res.host,
port: res.clientPort
});
可以看到,返回内容的 host
使用了res.host
,res
又来自connectors
,connectors
来自配置文件。
而game-server/config/servers.json
下connector
服务器的 配置条目 ,可以清楚的看见"host":"127.0.0.1"
。
解决问题
源头找到了,立刻将这里的127.0.0.1
全部替换成我本机192.168.1.61
。并且重启Chat
服务器。
同事再刷新访问的时候,便可以登录进来了。
写在后面
细心的人或许发现,调试器连接的IP地址,是127.0.0.1,但你或许在想,既然是叫"Remote Deubgger",应该可以连接除127.0.0.1
以外的IP吧? 我也是这么想的。但是,在不借助其他工具的情况下,不能办到。
就是说,不借助一个代理工具,是没办法连接到除了127.0.0.1
地址的调试端口的。
你可以借助NodeJS官方 Wiki 文章结尾(Ctrl-F后,搜索"You probably noticed")的方法及代码,来完成一个代理工具。以便调试部署在远端服务器上运行的代码。
同时这篇文章也是 Eclipse 的调试指导文章。
相关推荐
谷歌浏览器的WebStorm网页开发调试插件,全称为"JetBrains IDE Support",是由知名软件开发公司JetBrains推出的一款高效工具。这款插件专为提升前端开发者的工作效率而设计,尤其适用于那些使用WebStorm作为主要集成...
下边我们介绍下webstorm来开发微信小程序的一些配置: 1.首先FileType下Cascading Style Sheet 添加*.wxss (此图片来源于网络,如有侵权,请联系删除! ) 2.FileType下HTML 添加*.wxml (此图片来源于网络,如有...
- 使用WebStorm的内置调试器,设置断点,可以对微信小程序的代码进行逐行调试,查看变量值和调用栈,方便定位问题。 - 结合微信开发者工具的真机预览和模拟器功能,可以实现跨平台的调试。 5. **微信小游戏开发**...
开发者可以使用微信提供的开发工具进行编码,但WebStorm通过插件的形式提供了更强大的代码编辑和调试体验。这款插件可能提供了诸如代码智能提示、模板支持、实时预览、快捷部署等功能,使得开发者能在熟悉的WebStorm...
-- index.js |-- sample.js.babelrcgulpfile.babel.jspackage.json.babelrc内容: { "presets" : [ "es2015" ]} 下面描述的设置使用gulp 3.x将ES6文件(包括源映射)转换为ES5,然后可以在WebStorm中使用它们调试ES6...
WebStorm是一款流行的集成开发环境(IDE),被广泛用于开发JavaScript应用程序,包括Vue.js项目。Vue.js是一个用于构建用户界面的渐进式JavaScript框架。调试Vue项目通常需要利用WebStorm提供的调试工具来帮助开发者...
在IT行业中,WebStorm是一款备受推崇的集成开发环境(IDE),尤其在JavaScript和前端开发领域。它提供了丰富的功能,如代码高亮、自动补全、重构工具以及强大的调试能力。对于ThinkJS,这是一个基于Node.js的后端...
WebStorm是一款广受欢迎的...总之,"Webstorm小程序语法补丁包"是一个强大的工具,它可以将WebStorm转变为一个全面支持微信小程序开发的强大平台,使得开发者无需离开熟悉的IDE环境,就能进行高效的小程序项目开发。
资源名称:使用webstorm开发nodejs 中文WORD版内容简介:本文档主要讲述的是使用webstorm开发nodejs;希望对大家会有帮助;感兴趣的朋友可以过来看看资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学...
WebStorm是JetBrains公司推出的一款专为JavaScript、HTML和CSS等Web开发语言设计的IDE,它提供了丰富的代码补全、调试、版本控制等功能,大大提升了开发效率。 首先,我们需要了解HTML(HyperText Markup Language...
Vue Debug插件通常是为了提供更方便的Vue应用调试工具,使开发者能够更直观地理解数据流、追踪Vue组件状态以及调试Vue应用程序中的错误。 描述 "vue debug插件" 明确指出这个插件与Vue.js的调试相关。在Vue项目开发...
WebStorm下配置微信小程序代码提醒jar将其中的wecharCode.jar下载下来,然后在webStorm的File -> import settings中导入即可
WebStorm 5 的代码调试功能可以调试和验证服务器端 JavaScript – Node.js 的应用。 代码结构浏览 WebStorm 5 的代码结构浏览功能可以快速浏览和定位代码结构。 代码折叠 WebStorm 5 的代码折叠功能可以对代码...
在本文中,我们将深入探讨如何使用WebStorm IDE与AmazeUI框架来开发高效的移动页面,特别是在实现目录折叠和页面横屏滑动效果方面。WebStorm是JetBrains公司推出的一款强大的集成开发环境,专为Web开发者设计,支持...
解决webstorm调试js时Evaluate脚本获取dom属性丢失问题,百思不得其解,最后找到,原因出在webstorm调用chrome调试接口时设置了一个"ownProperties":true,设置为false即可这需要修改chrome调试插件源代码修改成这样就...
使用webstorm开发小程序wxml代码高亮提示。webstorm,phpstorm,intellij idea都可使用,小程序代码高亮插件
前提 自己前端不熟悉,很多都需要练习 ...WebStorm的Less使用 先关联对应的less 当然,对应的wxss文件,在webstorm中的显示, 可以参考自己其他文章 WebStorm:遇到的问题 这里,只要创建less文件,就会自动生成对
尽管微信提供了官方的开发工具,但有时开发者可能更倾向于使用其他IDE,例如WebStorm,以获得更高级的功能和自定义编辑体验。 在Chrome浏览器上运行微信小程序,首先需要安装并启用微信开发者工具。该工具提供了...