Chrome DevTools Console异常：console.log无法显示代码来源，跳转至consolePlugin.ts

以下是几个排查和解决的方向，按顺序尝试：

1. 排查扩展或自定义脚本对console.log的重写 #

很多开发类插件、项目里的自定义封装会改写console.log方法，导致调用来源被替换成插件文件：

• 先禁用所有Chrome扩展，重启浏览器后测试。如果恢复正常，再逐个启用扩展找出问题插件。
• 检查项目代码里有没有类似这样的console封装：

  const originalLog = console.log;
  console.log = (...args) => {
    // 自定义处理逻辑
    originalLog.call(this, ...args);
  };
  

  这类代码如果没正确保留调用栈，就会覆盖原始来源。暂时注释掉测试，或者修改封装逻辑确保调用栈正确传递。

2. 检查DevTools设置 #

• 打开DevTools的设置面板（右上角⚙️），切换到Console标签：
  • 确保Async stack traces处于开启状态（默认开启，关闭会影响栈追踪）。
  • 切换到Sources标签的设置，检查Blackboxing和Ignore list，确认自己的项目代码没被加入忽略列表。
• 在Console面板的过滤栏，确保没过滤掉自己的代码输出，比如别只保留了特定级别或来源的日志。

3. 确认项目构建配置的source map状态 #

如果是用Webpack、Vite等工具构建的项目：

• 开发环境下必须开启source map，否则编译后的代码无法映射回原始文件。比如Webpack设置devtool: 'eval-source-map'（开发环境推荐），Vite默认开发环境开启sourcemap，若手动关闭了要重新打开。
• 检查构建插件，有些日志相关插件会在打包时替换console.log调用，导致来源指向插件代码，暂时禁用这类插件测试。

4. 重置DevTools到默认状态 #

如果前面的方法都没用，直接重置DevTools：

• 打开DevTools设置，拉到最底部点击Restore defaults and reload，重启后再测试。

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