Nodejs webstorm 如何调试 chatofpomelo中的web-server部分的js

Nodejs webstorm 如何调试 chatofpomelo中的web-server部分的js

如何使用webstorm调试chatofpomelo中web-server中的js，有文章可以调试game-server中的js,如：https://github.com/NetEase/pomelo/wiki/使用-WebStorm-IDE-调试-Pomelo-应用程序 但是不知道如何调试web-server中的js，请高人指点…


3 回复

要在 WebStorm 中调试 chatofpomelo 项目中的 web-server 部分的 JavaScript，可以参考以下步骤。这些步骤基于官方文档，并提供了一个具体的调试方法。

步骤1: 设置项目

确保你已经正确安装了 chatofpomelo 项目，并且能够正常运行 web-server。

步骤2: 配置启动配置

  1. 打开 WebStorm。
  2. 点击顶部菜单栏的 Run -> Edit Configurations...。
  3. 点击左上角的加号（+），选择 Node.js。
  4. 在 Name 字段输入一个描述性的名称，例如 Web Server Debug。
  5. 在 JavaScript file 字段，输入你的 web-server 的入口文件路径，例如 ./bin/web-server.js。
  6. 在 Working directory 字段，输入项目的根目录路径，例如 ./。
  7. 在 Application parameters 字段，输入任何你需要传递给 web-server 的参数。
  8. 确保勾选了 JavaScript language version 并选择合适的版本（例如 ES6）。
  9. 点击 OK 保存配置。

步骤3: 添加断点

  1. 打开你想调试的 JavaScript 文件。
  2. 在你想暂停执行的地方点击行号旁边的空白区域，添加断点。

步骤4: 启动调试

  1. 点击顶部工具栏的绿色虫子图标（或者按 Shift+F9）来启动调试。
  2. 当程序执行到断点时，它会自动暂停。

示例代码

假设你的 web-server.js 文件类似于这样：

const app = require('express')();
const server = require('http').createServer(app);
const io = require('socket.io')(server);

app.get('/', (req, res) => {
    res.send('Hello World!');
});

io.on('connection', socket => {
    console.log('A user connected');
    // 添加断点
    socket.emit('news', { hello: 'world' });
    socket.on('my other event', data => {
        console.log(data);
    });
});

server.listen(3000, () => {
    console.log('Listening on port 3000');
});

在 socket.emit 行添加断点，然后按照上述步骤启动调试。

总结

通过上述步骤，你可以在 WebStorm 中有效地调试 chatofpomelo 项目中的 web-server 部分。这种方法不仅可以帮助你理解代码的执行流程，还可以让你更方便地进行代码修改和测试。


关于这个问题，可以有两个解决方案， 一就是不在webstorm中调试前端js，在chrome，或者firefox中调试即可。 二是在chrome装一个插件JetBrains IDE Support，具体怎么装自己查去。之后再webstorm中打开你的项目，打开一个页面htmL页面哦，没有的话可以自己新建一个，之后按住Alt+F2选择chrome即可实现实时显示的功能了，赶快试试吧。这个解决方案也说明了，前端js调试不仅可以用浏览器调试了，也可以是用webstrom调试了，给我们开发人员带来了很大的便利啊。

要在 WebStorm 中调试 chatofpomelo 中的 web-server 部分的 JS 代码，你可以遵循以下步骤：

  1. 启动 WebStorm 并打开项目：

    • 打开 WebStorm 并导入你的 chatofpomelo 项目。

  2. 配置 Node.js 调试配置：

    • 点击右上角的下拉菜单，选择 Edit Configurations...
    • 点击左上角的加号 (+)，选择 Node.js
    • 在 JavaScript file 字段中，输入 web-server 的入口文件路径，例如 web-server/app.js
    • 保存配置

  3. 设置断点：

    • 在你想调试的 web-server JS 文件中设置断点。例如，在 web-server/app.js 中找到你想暂停执行的地方，点击行号旁边以设置断点。

  4. 启动调试模式：

    • 确保你在 WebStorm 中正确设置了 Node.js 调试配置。
    • 点击位于右上角的绿色调试按钮（或按 Shift + F9）来启动调试。

  5. 检查变量和调用堆栈：

    • 一旦程序在断点处停止，你可以在调试工具栏中查看变量、调用堆栈等信息。
    • 使用调试工具栏上的按钮来逐步执行代码（逐行、逐语句等）。

以下是一个简单的示例代码，用于说明如何在 web-server/app.js 中设置一个简单的断点：

// web-server/app.js
const express = require('express');
const app = express();

app.get('/', (req, res) => {
    // 设置断点的地方
    console.log('Handling GET request for /');
    res.send('Hello, World!');
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

通过以上步骤，你应该能够在 WebStorm 中调试 chatofpomelo 的 web-server 部分。如果需要进一步的帮助，请参考 WebStorm 的官方文档或 Pomelo 社区资源。

回到顶部