怎样实时查看JS日志

实时查看 JS 日志，取决于运行环境（浏览器 / Node.js / 移动端 / 小程序）。下面按常见场景给你一份实用速查表。

一、浏览器中实时查看 JS 日志（最常见）

✅ 使用浏览器开发者工具（推荐）

步骤：

1. 打开网页
2. 按快捷键：
   • Chrome / Edge：F12 或 Ctrl + Shift + I
   • Mac：Cmd + Option + I
3. 切换到 Console（控制台）

常用日志方法：

console.log('普通日志')
console.warn('警告')
console.error('错误')
console.info('信息')

实时效果：

• JS 执行时，日志会立刻显示在 Console 中
• 支持点击查看对象、堆栈、源码位置

✅ 自动滚动 & 过滤日志

• 勾选 ✅ Preserve log（不清除刷新日志）
• 使用过滤框输入关键字
• 按级别过滤（Log / Warning / Error）

二、Node.js 实时查看 JS 日志

✅ 1. 直接在终端运行

node index.js

console.log('server start')

终端会实时输出日志。

✅ 2. 实时查看已运行程序的日志

方式一：PM2（生产推荐）

pm2 logs
pm2 logs app-name --lines 100

方式二：tail 查看日志文件

tail -f logs/app.log

三、前端项目（Vue / React / Webpack）

✅ 开发环境

• 启动后浏览器 Console 实时显示

npm run dev

✅ 生产环境

✅ 不要直接用 console.log 推荐：

• 接入日志系统（如 Sentry）
• 或写本地日志文件（仅限 Electron / 服务端）

四、移动端 / WebView 实时查看 JS 日志

✅ Android（Chrome）

1. 手机开启 USB 调试
2. 电脑 Chrome 打开：

chrome://inspect/#devices

3. 选择页面 → Inspect

✅ iOS（Safari）

1. Safari → 设置 → 高级 → 开启“Web 检查器”
2. 连接 iPhone
3. Safari → 开发 → 选择设备

五、小程序（微信 / 支付宝）

✅ 微信小程序

• 开发者工具 → Console
• 真机调试 → 实时日志

console.log('小程序日志')

六、进阶：实时远程查看 JS 日志

✅ 使用 Sentry / LogRocket

适合生产环境：

• 自动捕获错误
• 查看用户行为 & 控制台日志

七、常见问题

❓ 为什么看不到 console.log？

• 被压缩工具移除（生产环境）
• 代码未执行
• Console 被过滤
• 在错误的窗口（iframe / worker）

总结速查表

如果你能告诉我：

• ✅ 浏览器还是 Node？
• ✅ 本地还是线上？
• ✅ Vue / React / 原生？

我可以给你更精确的实时日志方案（包括调试技巧和工具推荐）。