【问题标题】:Breakpoint right before page refresh?页面刷新前的断点?
【发布时间】:2016-12-28 04:19:34
【问题描述】:

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

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

【问题讨论】:

  • 您可以尝试自定义onunload 侦听器并在那里中断。
  • 然后您可以generate a stack trace 查看触发重新加载涉及哪些函数。
  • 你可能已经知道了。 Chrome 的控制台中有一个复选框,使重新加载后的日志不清晰。
  • 我尝试了onunloadonbeforeunload,但调用堆栈为空。

标签: javascript google-chrome debugging breakpoints


【解决方案1】:

试试这个:

  1. 打开您的 Chrome 开发工具
  2. 导航到“来源”标签
  3. 在右侧面板上,展开“Event Listener Breakpoints”
  4. 展开“加载”树
  5. 检查beforeunloadunload 选项

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

编辑:或者,如果这不起作用,您可以使用 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 断点”功能根本没有让 beforeunloadunload 的调试器中断。
  • 这对我不起作用。在 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 跟踪...(很难,但可能) 示例:

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

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2020-10-08
      • 2019-10-14
      • 2019-02-01
      • 2013-04-10
      • 1970-01-01
      • 2021-03-30
      • 2011-05-12
      • 1970-01-01
      相关资源
      最近更新 更多