Ubuntu 环境下利用日志进行 JS 调试的实用流程
一 前端 JS 的日志与浏览器 DevTools
- 在代码中加入分层日志输出，便于快速定位：
- 使用 console.log / console.error / console.warn / console.info 输出关键变量、分支走向与错误信息；错误场景建议附带 堆栈与上下文对象。
- 打开 Chrome/Firefox 开发者工具（F12 或 Ctrl+Shift+I），在 Console 面板查看报错与输出；在 Network 面板核对请求状态、响应码与返回数据；必要时在 Sources 面板设置断点、单步执行与观察作用域变量。
- 若需远程或设备端调试，可使用 Chrome 远程调试：在目标设备上以 –remote-debugging-port=PORT 启动 Chrome，随后在调试端访问 chrome://inspect 发现并调试目标页面或设备。
二 Node.js 后端日志与系统日志联动
- 使用结构化日志库输出到控制台与文件，便于检索与聚合：
- 示例（winston）：
- 安装：npm install winston
- 配置与输出：
- const winston = require(‘winston’);
- const logger = winston.createLogger({
- level: ‘info’,
- format: winston.format.json(),
- transports: [
- new winston.transports.File({ filename: ‘error.log’, level: ‘error’ }),
- new winston.transports.File({ filename: ‘combined.log’ })
- ]
- });
- logger.info(‘info message’, { ctx: ‘startup’ });
- logger.error(‘error occurred’, { err: err.stack });
- 记录 HTTP 访问与关键业务事件：
- 在 Express 中使用 morgan 记录请求日志（如 combined 格式），并在业务关键点打点（如数据库调用、外部 API 调用前后），便于还原调用链与耗时。
- 将应用接入系统日志，统一运维与检索：
- 以 systemd 管理时，使用 journalctl -u your-service-name -f 实时查看服务日志；如需将日志写入 /var/log/，确保目录与文件权限正确并配置合适的轮转策略（如 logrotate）。
- 提升日志可观测性：
- 按环境设置日志级别（开发环境 debug，生产 info/warn）；对异常与未捕获事件进行兜底记录（如 process.on(‘unhandledRejection’)、process.on(‘uncaughtException’)）；必要时引入 ELK/Graylog 等集中式日志平台。
三 高效检索与分析日志的命令行技巧
- 实时跟踪日志文件：tail -f /path/to/app.log
- 关键字过滤与上下文查看：
- 过滤错误：grep -n “ERROR” combined.log
- 查看错误前后各 5 行：grep -n -A5 -B5 “ERROR” combined.log
- 多关键字组合与统计：
- 多词匹配：grep -E “timeout|ECONNREFUSED” app.log
- 统计频次：grep “ERROR” app.log | sort | uniq -c | sort -nr
- 结构化日志（JSON）字段筛选（需 jq）：
- 提取 level=error 的日志与时间：jq ‘select(.level==“error”) | {ts: .timestamp, msg: .message}’ combined.log
- 按时间窗口查看（假设日志含 ISO8601 时间）：
- 例如某日的日志：sed -n ‘/2025-12-08T/,/2025-12-08T23:59:59/p’ app.log
四 常见场景与对应做法
- 前端页面白屏或 JS 报错：打开 DevTools Console 定位语法/运行时错误；在 Network 检查 JS/CSS/接口 的 200/4xx/5xx 状态与响应内容；必要时使用 Sources 断点调试。
- Node.js 服务异常但进程未退出：用 journalctl -u your-service-name -f 观察服务日志；同时 tail -f error.log 与 combined.log 查看错误堆栈与业务日志上下文；若涉及 HTTP，复核 morgan 访问日志中的状态码与耗时。
- 第三方依赖或异步异常频发：在 unhandledRejection/uncaughtException 中记录完整堆栈并上报；为依赖库开启调试输出（如 DEBUG=* 环境变量）以补充内部日志。