使用得心应手的IDE来开发应用程序,可以使我们的工作事半功倍。而调试则更可以让我们准确的定位BUG,发现问题。
本文讲述如何使用 WebStorm 这个怪兽级JavaScript IDE来调试 Chat of Pomelo
如果你更喜欢 Eclipse 等其他IDE,希望本文也可以有一些帮助。

前言

  • 首先我们需要知道,NodeJS应用程序可以在运行命令中加入--debug=5858参数,可以使得NodeJS程序监听本地5858端口,并开启调试模式。

  • 其次,Pomelo的运行原理是:pomelo start时,启动了master服务器,然后其先读取配置文件,再启动由game-server/config/servers.json文件中经过配置的各个服务器进程。其中,你看到的idhostport等等都是子服务器的启动参数,这些参数都会放到启动命令行中app.js的后面。

  • 再次,Pomelo的设计人员最初已经考虑到了直接在nodeapp.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.1Debug 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.hostres又来自connectorsconnectors来自配置文件。

game-server/config/servers.jsonconnector服务器的 配置条目 ,可以清楚的看见"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 的调试指导文章。

转自:https://github.com/NetEase/pomelo/wiki/%E4%BD%BF%E7%94%A8-WebStorm-IDE-%E8%B0%83%E8%AF%95-Pomelo-%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F

使用 WebStorm IDE 调试 Pomelo 应用程序的更多相关文章

  1. 利用 Eclipse IDE 的强大功能远程调试 Java 应用程序

    II. Eclipse 连接套接字模式下的 VM 调用示例(具体引用实践) 说明:不管采用哪种方式,调试的源代码都在eclipse的环境下 一.调试方式一(将目标应用程序作为调试的服务器,eclips ...

  2. 在linux中如何调试C语言程序

    在Linux下面可以使用下面几种形式对C语言进行调试: 1 gdb gdb program 这是最原始的调试方法,若非熟悉命令行,这种方式其实是比较麿人的.有兴趣的可以参考一些我之前的博文.http: ...

  3. slickedit编译调试linux应用程序

    目录 slickedit编译调试linux应用程序 工程建立 编译 智能报错跳转 配置编译环境 调试 title: slickedit编译调试linux应用程序 date: 2019/3/19 17: ...

  4. vscode调试pomelo和pomelo使用vscode调试

    使用vscode 通过端口remote attach进行调试 pomelo. 0. 网上好多调试pomelo的都是webstorm.或者vscode调试node的教程.但没找到vscode调试pome ...

  5. WebStorm+Chrome调试Vue步骤

    在调试时请 注意 : 在WebStorm中启动调试时,WebStorm会根据你设置的url,自动打开新的Chrome浏览器进程访问这个设置的url,而且这个浏览器页面和你平常看到的浏览器差异会比较大, ...

  6. VueJs(15)--- Webstorm+Chrome 调试Vue项目

    Webstorm+Chrome 调试Vue项目 前言 在项目开发中,Debug模式是非常有必要的,后端对于IDEA工具而言Debug模式非常方便,但前端WebStorm而言如果启用Debug模式是需要 ...

  7. 在windows通过visual studio远程调试linux mono程序

    本文参考文章 https://github.com/techl/MonoRemoteDebugger 1.通过连接https://github.com/techl/MonoRemoteDebugger ...

  8. webstorm IDE添加Plugins----添加vue插件

    webstorm IDE很强大了,扩展性很强,语法校验很强大,不过有时候一些特殊的插件  还是需要自己添加到IDE的 下面以添加VUE Plugins 为例: Setting--Plugins[点下方 ...

  9. 在Chrome+Visual Studio中调试asp.net程序很慢的问题(Firefox也有类似问题)

    在Chrome+Visual Studio中调试asp.net程序很慢的问题(Firefox也有类似问题) 今天开始起在Chrome中调试,发现问题主要出在菜单栏(layout文件)中,google了 ...

随机推荐

  1. mysql 开发进阶篇系列 31 工具篇(mysql连接工具与MyISAM表压缩工具)

    一.mysql 连接工具 在mysq提供的工具中,DBA使用最频繁的莫过于mysql.这里的mysql是指连接数据库的客户端工具. 1.1 连接选项 -u, -- user=name 指定用户名 -p ...

  2. 实验吧 貌似有点难 伪造ip

    解题链接: http://ctf5.shiyanbar.com/phpaudit/ 解答: 点击View the source code —>代码显示IP为1.1.1.1即可得到KEY—> ...

  3. Docker基本命令汇总

    Docker的三大核心概念:镜像.容器.仓库 镜像:类似虚拟机的镜像.用俗话说就是安装文件. 容器:类似一个轻量级的沙箱,容器是从镜像创建应用运行实例,可以将其启动.开始.停止.删除.而这些容器都是相 ...

  4. Python3笔记——常用技术点汇总

    目录 · 概况 · 安装 · 基础 · 基础语法 · 数据类型 · 变量 · 常量 · 字符编码 · 字符串格式化 · list · tuple · dict · set · if语句 · for语句 ...

  5. Linux中ls命令用法

    ls 命令的含义是list显示当前目录中的文件名字.注意不加参数它显示除隐藏文件外的所有文件及目录的名字. 1)ls –a 显示当前目录中的所有文件,包含隐藏文件 命令: aijian.shi@U-a ...

  6. VirtualBox安装CentOS7

    一:.下载CentOS7的镜像 下载地址:https://www.centos.org/download/ 进入后有三个版本可以选择: 1.DVD ISO  标准安装版,一般下载这个就可以了(推荐)本 ...

  7. html 颜色选择器 亲测,很好用

    @*以下 是测试html 颜色选择器的*@ @*<a href="#" mce_href="#" onclick="initColorPicke ...

  8. 4款开源免费的数据可视化JavaScript库

    概述:交互式数据可视化在很大程度上取决于JavaScript库的任务能力.在这篇文章中,我们将看看四个JavaScript库:D3,InfoVis,Processing.js,和Recline.js. ...

  9. WebFrom 【文件上传】

    文件上传 准备工作1.文件上传的页面2.上传文件要保存的文件夹 1.只要将文件传上来就行 //1.获取要上传的文件,并且知道要上传到服务器的路径 string s = "Uploads/aa ...

  10. Python 实现的 12306抢票脚本

    Python12306抢票脚本 本脚本使用一个类来实现所有代码,大体上分为以下几个模块及其步骤:- 初始化对象属性(在抢票前进行的属性初始化,包括初始化浏览器模拟对象,个人信息等).- 建立模拟浏览器 ...