怎么定位js日志问题

定位 JS（JavaScript）日志问题，核心思路是**“让日志可见 → 复现问题 → 缩小范围 → 精确定位”**。下面按实战流程给你一套方法。

一、先确保“日志能看见”

1. 浏览器控制台（前端）

• 打开方式：
  • Chrome / Edge：F12 → Console
  • Mac：Cmd + Option + J
• 常见日志：

  console.log()
  console.warn()
  console.error()
  console.table()
  console.trace() // 打印调用栈
  

2. 移动端

• 真机调试：
  • Chrome → chrome://inspect
  • Safari → 开发菜单
• 或用 vConsole / eruda（H5 常用）

二、区分“日志问题”的类型

✅ 情况 1：没有日志 / 日志不打印

可能原因：

• 代码未执行（条件未进入）
• 被打包工具 tree-shaking 掉
• 在 try/catch 中被吞掉
• 日志级别被过滤

排查方式：

console.log('start') // 放在最前面

✅ 情况 2：日志有，但内容看不懂

• 打印对象用：

  console.log(JSON.stringify(obj, null, 2))
  

• 或：

  console.dir(obj)
  

✅ 情况 3：报错日志看不出位置

看错误格式：

Uncaught TypeError: xxx is not a function
    at foo (app.js:12)

重点看：

• 文件名
• 行号
• 调用栈（Call Stack）

三、用“断点”代替猜日志（强烈推荐）

1. 源码断点

• F12 → Sources
• 点行号下断点
• 刷新页面

2. 条件断点

// 只在 id === 123 时断
if (id === 123) debugger

3. debugger 语句

function test() {
  debugger // 自动断住
}

四、前端工程化场景（Vue / React）

Vue

// main.js
Vue.config.devtools = true

React

• 用 React DevTools
• 组件内：

  useEffect(() => {
    console.log(props)
  }, [props])
  

五、线上问题怎么定位？

1. 错误监控

• Sentry
• Fundebug
• 自建：

  window.onerror = function(msg, url, line) {
    report({ msg, url, line })
  }
  

2. Source Map

• 打包时开启：

  devtool: 'source-map'
  

• 否则只能看到 app.min.js:1

六、日志问题常见“坑”

✅ 推荐日志格式：

console.log('[UserModule]', userId, data)

七、快速定位 checklist

• [ ] 能否复现
• [ ] 控制台有无报错
• [ ] 是否进入对应代码
• [ ] 参数是否正确
• [ ] 异步顺序是否对
• [ ] 是否环境问题（浏览器 / 版本）

如果你愿意，可以直接把：

• 报错截图
• 日志内容
• 技术栈（Vue / React / Node）

发给我，我可以帮你精准定位是哪一行的问题。