页面刷新前的断点？

Posted 2023-03-10

【中文标题】页面刷新前的断点？

【英文标题】：Breakpoint right before page refresh?

【发布时间】：2016-12-28 04:19:34

【问题描述】：

我正在调试一些第 3 方缩小的 javascript，它在某处触发了浏览器页面刷新。但是，我无法弄清楚代码的哪一部分导致了刷新。

有没有办法在 Chrome 中设置一个断点，在页面刷新之前触发，这样我就可以检查调用堆栈以查看是什么原因造成的？

【问题讨论】：

您可以尝试自定义onunload 侦听器并在那里中断。

然后您可以generate a stack trace 查看触发重新加载涉及哪些函数。

你可能已经知道了。 Chrome 的控制台中有一个复选框，使重新加载后的日志不清晰。

我尝试了onunload 和onbeforeunload，但调用堆栈为空。

你试过***.com/a/12419326/123415

【参考方案1】：

试试这个：

打开您的 Chrome 开发工具 导航到“来源”标签 在右侧面板上，展开“Event Listener Breakpoints” 展开“加载”树 检查beforeunload 和unload 选项

看看是否有帮助；截图如下。

编辑：或者，如果这不起作用，您可以使用 Chrome 搜索所有加载的脚本以查找可能负责的代码。显然有a lot of ways to refresh the page with JavaScript，但它们大多有一些常见的字符串，如“navigator”、“location”、“reload”、“window”。

最后，如果有指向您所在页面的链接，则可能是某些 JS 触发了对它的点击——不太可能，但如果到目前为止没有其他任何工作，则值得探索......

（请原谅我在手机上的格式...）

注意：有时，由于我尚未完全理解的原因，此解决方案实际上无法真正导致调试器暂停；在这种情况下，我发现 thorn̈'s answer to this question 为我解决了问题。

【讨论】：

它不会泄露导致刷新的代码段

抱歉@Siddharth 不确定我明白你在说什么？

我的意思是 OP 想要检测导致页面刷新的代码片段，您放置这些事件的方式很好，但是这种或其他方式我们无法知道触发代码的位置刷新，希望你现在有更好的主意

@Siddharth - 感谢您的澄清。只要调试器触发，我相信我们应该能够在开发工具中跟踪它——即使它不是我们调试的行，我们也应该能够在堆栈中跟踪它开发工具。你不同意吗？

我只是不确定，让我运行一些代码并检查一下，谢谢

【参考方案2】：

在 Firefox 中（不是 Chrome，这很重要；UPD 2020：它现在也适用于 Chrome）开发者工具，转到控制台，输入 addEventListener('beforeunload',()=>debugger)，然后执行您的代码。调试器在debugger 语句处停止后，查看调用堆栈。您将看到触发事件的原因。 Chrome 那里没有。

至少，这对我有用。

【讨论】：

这在 Chrome 中也应该可以工作，但有趣的是，我第一次尝试时它确实不工作。我访问了 Sources 选项卡并启用了“Pause on exceptions”（认为这可能会显式启用 debugger 语句），尝试过（它有效）然后再次禁用它，但即使在新启动的 Chrome 实例中它仍然可以继续工作。奇怪的。 （更奇怪的是，Chrome 让自然 F5 重新加载（大部分）通过，但导航到其他 URI 或调用 location.reload 被侦听器中的调试器捕获。）

这在 Chrome 79 中也适用于我！就我而言，这是由调用window.location.reload();（无意）的脚本引起的。奇怪的是，“DOM 断点”功能根本没有让 beforeunload 和 unload 的调试器中断。

这对我不起作用。在 Firefox (v76) 和 Chrome (v83) 中都没有，因为调用堆栈只有一个调用。

@silviubogan 这很可能意味着在你的情况下，位置不是由JS改变的。

在 Chrome 83 中为我工作。我刚刚重新检查：addEventListener('beforeunload',()=>debugger);function foo()window.location.reload();foo() 调用堆栈显示正确。

【参考方案3】：

在开发工具的网络窗格中，切换“保留日志”，仔细检查启动器列。

【参考方案4】：

您没有指定 3rd 方库的作用。 如果它是一个 ui 组件，如广告或类似的东西，只需将其放在 iframe 中，并根据需要配置 sandbox 属性。https://developer.mozilla.org/en/docs/Web/html/Element/iframe（向下滚动到沙盒属性部分）

如果它是由事件触发的，只需使用（仅在 chrome 开发工具中）getEveneListener() 函数并遵循listener 跟踪...（很难，但可能） 示例：

侦听器属性将引导您访问将要调用的实际函数。您可以在混淆代码中搜索它们并添加调试器以了解其用途。

还有很多其他的场景——如果你能指定更多的话。