如何调试从浏览器开始就冻结的 Google Chrome 中的选项卡？

Question

在一个 vue Web 应用程序中，我遇到了一些由应用程序 (vue-router) 处理的深层链接 (example.com/app/some/123) 的问题。

有时（不总是），无论出于何种原因，在没有打开浏览器窗口时单击此类链接（在 Outlook 中或从桌面快捷方式）时，Chrome 会启动但立即冻结（选项卡变得无响应） .

感觉在我的应用程序代码中发生了一些重定向循环，导致此冻结。但我的问题是我不知道如何调试它以找到位置：

• 可以使用菜单打开开发工具，但 JS 文件/代码不会“加载” - 脚本选项卡保持空白
• 点击暂停按钮什么都不做，同样适用于按 F8（暂停脚本执行）
• 分析器无法启动（停留在“正在初始化”）。

我也有这样的感觉，当应用程序的新版本（js 包）发布但 Chrome 缓存了一些以前的版本时会发生这种情况。感觉这更经常产生问题。但这只是猜测。

单击暂停按钮/F8 是我处理此类问题的常规程序，以找到我们目前在 JS 代码中的位置。但不幸的是，在这里，这不起作用，因为大多数浏览器都没有响应。

关闭 Chrome 的唯一方法是通过任务管理器将其杀死。

当浏览器进程开始以某种方式接近冻结整个选项卡的 JS 代码时，是否有任何方法可以通过 Chrome 设置启用额外的日志记录或激活“立即调试会话”？ 所以理想情况下，从浏览器开始，“调试会话”的配置文件就会被保存，即使浏览器被进程终止，以后可以检查？

Answer 1

你可以试试 webQsee (https://chrome.google.com/webstore/detail/webqsee-web-sniffer-recor/gamdpfnfkjknkimfbboonmgdfnondfme)。该扩展提供了一些有用的导出功能，可以帮助您确定根本原因。

事件快照 导出屏幕截图、Cookie、网络和控制台输出。很多信息，但它是一种专有格式，只能在扩展程序本身中进行分析。

Excel 导出 类似于 HAR 导出，但也包括控制台输出。

这两个导出选项（以及更多）可通过位于扩展窗口底部的导出菜单获得。