eggJS 代码调试,很详细!

1. 使用 日志输出 进行调试

控制台输出

console.log(); // haha

使用 logger 模块

框架内置了日志 功能,使用 logger.debug() 输出调试信息,推荐在应用代码中使用它。

**// controller
this.logger.debug(‘current user: %j’, this.user);
// service
this.ctx.logger.debug(‘debug info from service’);
// app/init.js
app.logger.debug(‘app init’);


通过 config.logger.level 来配置打印到文件的日志级别,通过 config.logger.consoleLevel 配置打印到终端的日志级别。

日志路径
  • 所有日志文件默认都放在 ${appInfo.root}/logs/${appInfo.name} 路径下,例如 /home/admin/logs/example-app
  • 在本地开发环境 (env: local) 和单元测试环境 (env: unittest),为了避免冲突以及集中管理,日志会打印在项目目录下的 logs 目录,例如 /path/to/example-app/logs/example-app

如果想自定义日志路径:

// config/config.${env}.js
exports.logger = {
  dir: '/path/to/your/custom/log/dir',
};

更详细教程参考官方文档

使用 debug 模块

debug 模块是 Node.js 社区广泛使用的 debug 工具,很多模块都使用它模块打印调试信息,Egg 社区也广泛采用这一机制打印 debug 信息,推荐在框架和插件开发中使用它。
我们可以通过 DEBUG 环境变量选择开启指定的调试代码,方便观测执行过程。
(调试模块和日志模块不要混淆,而且日志模块也有很多功能,这里所说的日志都是调试信息。)
开启所有模块的日志:


$ DEBUG=* npm run dev

开启指定模块的日志:


$ DEBUG=egg* npm run dev

单元测试也可以用 DEBUG=* npm test 来查看测试用例运行的详细日志。


2. 使用 DevTools 进行调试

最新的 DevTools 只支持 Inspector Protocol 协议,故你需要使用 Node.js 8.x+ 的版本方能使用。
执行 npm run debug 启动:


➜ showcase git:(master) ✗ npm run debug
showcase@1.0.0 debug /Users/tz/Workspaces/eggjs/test/showcase
egg-bin debug
Debugger listening on ws://127.0.0.1:9229/f8258ca6-d5ac-467d-bbb1-03f59bcce85b
For help see https://nodejs.org/en/docs/inspector
2017-09-14 16:01:35,990 INFO 39940 [master] egg version 1.8.0
Debugger listening on ws://127.0.0.1:5800/bfe1bf6a-2be5-4568-ac7d-69935e0867fa
For help see https://nodejs.org/en/docs/inspector
2017-09-14 16:01:36,432 INFO 39940 [master] agent_worker#1:39941 started (434ms)
Debugger listening on ws://127.0.0.1:9230/2fcf4208-4571-4968-9da0-0863ab9f98ae
For help see https://nodejs.org/en/docs/inspector
9230 opened
Debug Proxy online, now you could attach to 9999 without worry about reload.
DevTools → chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:9999/ws_proxy

然后选择以下一种方式即可:

  • 直接访问控制台最后输出的 DevTools 地址,该地址是代理后的 worker,无需担心重启问题。
  • 访问 chrome://inspect,配置对应的端口,然后点击 Open dedicated DevTools for Node 即可打开调试控制台。


3. 使用 VSCode 进行调试

方式一:

开启 VSCode 配置 Debug: Toggle Auto Attach,然后在 Terminal 执行 npm run debug 即可。
【我也没有搞通,不明白怎么弄?!求路过的大佬指教。】

方式二:

配置 VSCode 的 .vscode/launch.json,然后 F5 一键启动即可。(注意,需要关闭方式一中的配置)

1. 设置断点

image.png
如上图,点击左侧的行数,16行就可以打上断点了。

2. 配置launch.json文件

2.1 进入调试窗口点击vscode左侧的debug窗口,如果你之前没有配置过launch.json文件,那么效果就会如下图一样。
image.png

2.2 新建launch.json配置文件
点击左上方,【没有配置】,选择 添加配置;
VSCode本身就内置了Node.js的调试工具,如果将来你需要调试别的东西,可以在这里添加对应的调试插件工具。
image.png新版本的VSCode会自动匹配环境,生成launch.json文件,如果你的木有生成,需要手动选择Node.js环境
2.3 添加配置image.pnglaunch.json文件新建好后,我们需要进行一些配置操作,这里我们选择的是,附加到进程。
2.4 修改launch.json文件

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Egg",
            "type": "node",
            "request": "launch",
            "cwd": "${workspaceRoot}",
            "runtimeExecutable": "npm",
            "windows": {
                "runtimeExecutable": "npm.cmd"
            },
            "runtimeArgs": [
                "run",
                "debug"
            ],
            "console": "integratedTerminal",
            "protocol": "auto",
            "restart": true,
            "port": 9999,
            "autoAttachChildProcesses": true
        }
    ]
}

官方文档提供的 “port”: 9229 进不去断点,不知道为什么,网上查了下,改成9999正常。

3.启动调试

launch.json文件配置和好后,然后按F5启动
image.png

接着在需要断点的代码位置进行断点,然后访问即可,会进入你打的断点,在上面的操作栏可以进行调试。
image.png
还可以查看打印变量信息
image.png
更多玩法自己探索哈~

官方文档也提供了一个 vscode-eggjs 扩展来自动生成配置。

更多 VSCode Debug 用法可以参见文档: Node.js Debugging in VS Code


参考文献:
https://eggjs.org/zh-cn/core/development.html#%E4%BD%BF%E7%94%A8-egg-bin-%E8%B0%83%E8%AF%95
https://wurh.github.io/2018/11/07/20181107/

<think>好的,用户询问如何在HBuilderX中调试代码,我需要根据提供的引用内容来整理回答。首先,引用3提到HBuilderX有集成的调试器和实时预览功能,支持设备模拟器。引用4则详细介绍了Egg.js项目的断点调试步骤,包括配置调试模式和启动调试。用户可能需要知道基本调试步骤和不同项目类型的调试方法。 首先,应该分步骤说明通用调试方法,比如设置断点、启动调试模式、使用控制台。然后针对不同项目类型,比如uni-app或Node.js项目,可能需要不同的配置,比如引用4中的npm run debug。还要注意提到的常见问题,比如官网文档打不开时的镜像站点,以及依赖安装的问题。需要确保用户了解如何安装必要插件,如引用1和2提到的插件安装步骤,可能影响调试功能。最后,添加相关问题,帮助用户深入理解。</think>### HBuilderX代码调试方法教程 #### 一、通用调试流程 1. **设置断点** 在代码行号左侧点击添加红色断点标记,支持JavaScript、TypeScript等语言[^3]。 2. **启动调试模式** 通过顶部菜单栏选择「运行」-「调试运行到浏览器」,或使用快捷键$Ctrl + Shift + D$(Windows)/$Cmd + Shift + D$(macOS)[^3]。 3. **调试控制台** 调试启动后自动打开调试面板,包含: - 变量监视窗口 - 调用堆栈 - 断点管理 - 控制台输出(支持$console.log()$调试)[^3] ```javascript // 示例调试代码 function calculate(a, b) { let sum = a + b; // 在此行设置断点 return sum * 2; } console.log(calculate(3,5)); ``` #### 二、特殊项目调试 1. **uni-app小程序调试** - 需安装微信开发者工具(引用[1]) - 配置工具路径:菜单「设置」-「运行配置」-「微信开发者工具路径」 - 使用「真机运行」可直接在手机端调试 2. **Node.js项目调试**(如Egg.js) 通过终端执行: ```bash npm run debug # 启动调试服务器[^4] ``` 在HBuilderX中创建「Node调试」配置,端口号需与项目配置一致[^4] #### 三、调试优化技巧 1. **条件断点** 右键断点设置触发条件,如:$x > 10$ 2. **跨设备调试** 使用「设备模拟器」测试不同分辨率效果[^3] 3. **插件支持** 安装「Debugger for Chrome」等插件扩展调试能力[^2] #### 四、常见问题处理 1. 调试时遇到「端口占用」错误,可修改调试配置端口号 2. 若npm依赖安装失败,建议使用cnpm(引用[4]) 3. 文档访问异常时可使用镜像站:https://www.bookstack.cn/read/eggjs-2.26-zh[^4]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值