为什么console.log输出显示react_devtools_backend.js:4049而非实际文件行号

这个问题是React DevTools扩展重写了全局console.log方法导致的，它会把所有console调用劫持后统一输出，所以行号会指向它自身的脚本文件而非你的业务代码。问题现象如下图：

修复方法 #

• 方法1：将React DevTools脚本加入Chrome控制台忽略列表
  1. 打开Chrome控制台，点击右上角齿轮图标进入设置页面
  2. 找到「忽略列表（Ignore List）」选项
  3. 点击「添加规则（Add pattern）」，输入react_devtools_backend.js后确认保存
  4. 刷新页面重新打印日志，即可看到正确的业务代码文件路径和行号
• 方法2：临时调整React DevTools扩展权限
  如果你不想修改控制台忽略规则，也可以临时关闭React DevTools的注入权限：打开Chrome扩展管理页，找到React DevTools进入详情页，关闭「允许访问所有网站/允许访问文件网址」选项，调试完成后再开启即可。
• 方法3：封装日志方法时保留原始调用上下文
  如果你在项目中自行封装了公共日志打印工具，不要直接嵌套包装console方法，需要用bind绑定原始上下文保留调用栈：

  // 正确写法，不会丢失行号
  const customLog = console.log.bind(console)
  // 错误写法，会导致行号指向当前封装文件
  // const customLog = (...args) => console.log(...args)
  

内容的提问来源于stack exchange，提问作者Abby Zhang