如何调试谷歌Chrome启动时立即冻结的Vue应用标签页？

方案1：启动时开启Chrome性能追踪（事后可导出） #

• 先完全关闭所有Chrome进程，确保没有后台残留
• 找到Chrome的可执行文件路径：Windows默认路径为C:\Program Files\Google\Chrome\Application\chrome.exe，Mac默认路径为/Applications/Google Chrome.app/Contents/MacOS/Google Chrome
• 用命令行加参数启动Chrome，同时开启启动阶段追踪，直接追加目标链接即可触发复现场景，Windows示例命令：

"C:\Program Files\Google\Chrome\Application\chrome.exe" --trace-startup --trace-startup-duration=30 https://example.com/app/some/123

Mac示例命令：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --trace-startup --trace-startup-duration=30 https://example.com/app/some/123

• 启动后Chrome会自动记录前30秒的所有运行数据，就算标签页卡死、后续强制杀进程，数据也会自动保存在用户目录下的chrome_trace文件里
• 事后打开正常的Chrome标签页，输入chrome://tracing，点击加载按钮，找到刚才生成的trace文件导入，就能看到卡死时间段内所有JS执行、路由跳转、重定向的调用栈，直接定位死循环或重定向逻辑的位置

方案2：启动时绑定远程调试端口，提前接入调试会话 #

• 同样先关闭所有Chrome进程
• 用远程调试参数启动Chrome，Windows示例命令：

"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --no-first-run --no-default-browser-check https://example.com/app/some/123

• 再开一个正常的Chrome窗口，输入chrome://inspect，点击「Configure」按钮，添加localhost:9222，稍等几秒就能看到刚才启动的目标标签页出现在待调试列表里
• 点击目标标签页对应的「inspect」按钮，就能提前拉起DevTools，不需要在卡死的标签页里手动打开，提前打debugger断点或者启动性能录制，就能捕获到卡死瞬间的执行状态

方案3：开启Chrome JS运行时详细日志 #

• 命令行启动时添加--js-flags="--log-all --log-code" --enable-logging --v=1参数，所有JS执行的日志会输出到Chrome日志文件：
  • Windows日志路径：%USERPROFILE%\AppData\Local\Google\Chrome\User Data\chrome_debug.log
  • Mac日志路径：~/Library/Application Support/Google/Chrome/chrome_debug.log
• 卡死强制关闭后打开日志文件，搜索循环出现的路由、重定向关键词，就能快速定位重复执行的代码段

场景专项排查建议 #

• 如果怀疑是缓存导致的新旧bundle冲突，可以在启动参数里加--disable-http-cache临时禁用缓存，验证复现概率是否变化
• 若确认是vue-router重定向循环，可先在本地路由守卫逻辑里加全局的console.count('router_before_each')计数，日志里如果短时间内出现上百次相同计数，直接排查守卫里的next()调用逻辑即可

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