温馨提示×

如何实时看js日志

小樊
47
2026-09-23 20:21:02
栏目: 编程语言

“实时看 JS 日志”要看日志在哪里产生,常见有几种场景,下面按使用频率给你总结:


一、浏览器前端 JS(最常用)

1. 用浏览器开发者工具(推荐)

  • 打开页面
  • F12 或 Ctrl + Shift + I
  • 切到 Console(控制台)
  • 代码里写的:
    console.log('xxx')
    
    会实时显示

✅ 支持:

  • console.log / warn / error
  • 实时刷新
  • 看网络、报错堆栈

2. 移动端实时看日志

  • Chrome:chrome://inspect
  • Safari:开发 → 连接 iPhone
  • 或用 vConsole(前端嵌入):
    <script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
    <script>
      new VConsole();
    </script>
    

二、Node.js 后端 JS

1. 终端直接看(最简单)

node app.js

日志会实时打印在终端


2. 用日志库(推荐)

const logger = require('pino')()
logger.info('hello')

常用:

  • winston
  • pino
  • log4js

3. 实时看日志文件

tail -f app.log

三、框架场景

React / Vue

  • 开发模式直接看浏览器 Console
  • Vite / Webpack 终端也会输出编译日志

四、远程 / 生产环境

  • 前端:sentry、fundebug
  • 后端:ELK、Grafana Loki
  • 实时流:
    kubectl logs -f pod-name
    

你可以告诉我:

  • 是前端还是后端?
  • 在浏览器 / Node / 服务器?
  • 是否需要生产环境实时日志?

我可以给你更精确的方案。

0 踩