为啥我不能在 chrome 控制台中展开这个事件对象？

Posted 2023-02-22

【中文标题】为啥我不能在 chrome 控制台中展开这个事件对象？

【英文标题】：Why can't I expand this event object in the chrome console?为什么我不能在 chrome 控制台中展开这个事件对象？

【发布时间】：2013-09-17 13:26:30

【问题描述】：

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

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

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

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

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

我在这里错过了什么？？

【参考方案1】：

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

试试这个，以防止页面实际发生变化：

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

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

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

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

【参考方案2】：

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

function(e) 
  console.dir(e);

【参考方案3】：

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

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

【参考方案4】：

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

debugger

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

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

---

事实上，可以说更好的做法是使用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 方法通常更好。