23

简化，我正在做的是在控制台中运行它：

window.onbeforeunload = function (e) {
    console.log(e);
}

但是在控制台中，当事件触发时（通过在编写 SO 问题的过程中尝试“离开页面”），我看到的是：

Event {clipboardData: undefined, cancelBubble: false, returnValue: true, srcElement: document, defaultPrevented: false…}

旁边有一个小“i”图形。当我单击它旁边的箭头以在控制台中展开对象时，没有任何反应。箭头转向表示它已扩展，但未扩展。

我在这里想念什么？

4

4 回答 4

24

发生这种情况是因为尽管您让控制台在页面更改上持续存在，但Object不再存在 - 当您离开页面时它已被销毁。这意味着它根本无法再被检查，因此单击向下的三角形没有帮助。

试试这个，以防止页面实际更改：

window.onbeforeunload = function (e) {
    console.log(e);
    return true;
}

现在页面将提示您询问您要做什么。在出现的提示中单击“取消”以保留在页面上。现在您可以Event根据需要在控制台中检查 。

不同之处在于该onbeforeunload函数现在返回的值不是null/ undefined。返回值可以是任何东西，甚至是''orfalse等​​......除nulland之外的任何东西undefined，它仍然会导致页面在导航之前提示，从而让您有机会检查事件。请记住，如果没有return声明，JavaScript 函数会undefined默认返回。

每当您无法在 Chrome 开发工具中检查某些内容时，90% 的时间是因为某些操作导致该内容变得不可用……页面从该对象存在时开始移动。

于 2013-09-13T00:50:29.833 回答
5

在检查对象或数组时，这是一个很好的做法，这些对象或数组稍后会更改以放入

debugger

...在您要调试的代码点之后。这会在此时暂停代码的执行，这意味着您可以肯定地知道此时您看到的是它的状态，而不是看到任何后续更改。

扩展失败可能意味着该对象随后从内存中删除：可能已删除或垃圾收集，或者（特别是如果您在 Node.js 脚本上使用 Chrome 开发工具）可能是脚本已完成，所以所有裁判现在无处可去。

事实上，可以说更好的做法是使用debugger而不是console.log，然后在局部变量中找到您想要检查的内容。

window.onbeforeunload = function (e) {
  debugger; // Now go find `e` in the local variables section
}

通过这种方式，您可以访问更多上下文，而无需担心代码后面发生的事情会导致输出更改。

永远记住，在 JavaScript 中，任何时候处理指向对象的变量时，都是在处理指向该对象最新状态的实时引用。

console.log记录引用，而不是对象的内容，当您查看和展开记录的引用时，您正在查看该引用在您查看它时指向的内容，而不是您记录它的时间。如果它已从内存中删除或重新分配，这可能什么都不是。

指向字符串和数字的变量指向值而不是引用，因此另一种选择可能是记录对象的字符串化版本，例如console.log(JSON.stringify(someObject))（尽管该输出可能更难阅读）。这种debugger方法通常更好。

于 2019-09-16T10:57:54.360 回答
3

老问题。但是这个简单的解决方案对我来说效果更好。采用

function(e) {
  console.dir(e);
}
于 2016-05-17T19:37:30.317 回答
0

我刚刚遇到了这个问题，我遇到了一个问题，我的 API PUT 请求显示cancelled在我的 chrome 开发工具的控制台选项卡中，我看到了相同的行为，我无法展开对象并且i旁边显示了小图标控制台条目。我决定发布这个答案并附上我的问题的链接，以防它可能对其他人有所帮助。

Api PUT 请求显示为“已取消”并显示错误消息“TypeError: failed to fetch”

于 2019-06-19T22:02:36.913 回答