为什么我不能在chrome控制台中展开此事件对象？

Question

简化,我正在做的是在控制台中运行它:

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

但是在控制台中,当事件触发时(通过在写一个SO问题的过程中试图"离开页面")我看到的是:

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

旁边有一个小"i"图形.当我单击它旁边的箭头以在控制台中展开对象时,没有任何反应.箭头指示它已展开,但不会展开.

我在这里失踪了什么？

Answer 1

这种情况正在发生,因为虽然您让控制台持续更改页面,但对象不再存在 - 它在您离开页面时被销毁.这意味着它不再需要检查,因此单击向下三角形没有帮助.

请尝试这样做,以防止页面实际更改.

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

它将提示您询问您要做什么,单击以保留在页面上,您现在可以根据需要在控制台中检查事件.当然,当涉及到实际发布代码时,你应该删除它,因为它总是会问人们如何导航.

Answer 2

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

当检查稍后可以更改的对象时，最好将其放入 adebugger而不是console.log：

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

这会暂停代码的执行，因此您可以确定您看到的是此时的变量是什么，而不是看到任何后续更改。

这样，您可以访问更多上下文，并且无需担心代码稍后发生的情况导致输出发生更改。

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

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

指向原语（如字符串和数字）的变量指向值而不是引用，因此您还可以：

• 记录对象的字符串化版本，例如console.log(JSON.stringify(someObject))（尽管该输出可能更难以阅读）。
• 如果对象的属性都是原始的，则记录一个浅克隆console.log({ ...someObject })（尽管任何对象属性都可能面临同样的问题）

该debugger方法通常更好。

Answer 3

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

function(e) {
  console.dir(e);
}