Question

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

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

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

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

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

我在这里缺少什么？

Answer 1

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

请尝试此操作，以防止页面实际更改：

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

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

不同之处在于onbeforeunload函数现在返回的值不是null / undefined。返回值可以是任何内容，甚至是''或false等等......除了null和undefined之外的任何内容，它仍会导致页面在导航之前提示从而为您提供检查活动的机会。请记住，没有return语句，JavaScript函数默认返回undefined。

每当你无法检查Chrome开发工具中的某些内容时，90％的时间是因为某些操作导致该内容无法使用...页面已经从该对象存在时开始移动。

Answer 2

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

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

Answer 3

检查对象或数组（稍后可能会更改以放入

）时是一个好习惯

debugger

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

扩展失败可能意味着该对象随后被删除或被垃圾回收，或者（特别是如果您在Node.js脚本上使用Chrome开发工具）该脚本已完成，因此 all < / em>引用指向无处。

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

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

Answer 4

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

Api PUT request showing as "cancelled" with error message "TypeError: failed to fetch"

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

4 个答案: