Why can’t I expand this event object in the chrome console?
Simplified, what I’m doing is running this in the console:
window.onbeforeunload = function (e) {
console.log(e);
}
But in the console, when the event fires (by trying to “leave page” in the middle of writing an SO question) what I see is this:
Event {clipboardData: undefined, cancelBubble: false, returnValue: true, srcElement: document, defaultPrevented: false…}
With a little “i” graphic next to it. When I click the arrow next to it to expand the object in the console, nothing happens. The arrow turns to indicate that it has expanded, but it doesn’t expand.
What am I missing here??
This is happening because although you’re letting the console persist over page changes, the Object no longer exists – it was destroyed when you left the page. This means it’s simply not available to be inspected anymore, so clicking the down triangle is not helpful.
Try this instead, to prevent the page actually changing:
window.onbeforeunload = function (e) {
console.log(e);
return true;
}
Now the page will prompt to ask you what to do. Click ‘cancel’ in the prompt that comes up in order to remain on the page. Now you can inspect the Event in the console as desired.
The difference is that the onbeforeunload function is now returning a value that isn’t null/undefined. The return value could be anything, even '' or false, etc…anything except null and undefined, and it will still cause the page to prompt before navigating away and thus giving you an opportunity to inspect the event. Remember that with no return statement, JavaScript functions return undefined by default.
Whenever you can’t inspect something in the Chrome Dev Tools, 90% of the time it’s because some action has caused that thing to become unavailable…the page has moved on from when that object existed.
The failure to expand can mean that the object was subsequently removed from memory: possibly deleted or garbage-collected, or (especially if you’re using Chrome dev tools on a Node.js script) it could be that the script completed, so all refs now point nowhere.
It’s a good practice when inspecting objects that can change later to drop in a debugger instead of console.log:
window.onbeforeunload = function (e) {
debugger; // Now go find `e` in the local variables section
}
This pauses the execution of the code, so you know for sure you’re seeing what the variable was at this point, rather than seeing any subsequent changes.
This way, you can access more context and don’t need to worry about changes to output caused by what happens later in the code.
Always remember that in JavaScript, any time you deal with a variable that points to an object, you’re dealing with a live reference, to the latest state of that object.
console.log logs the reference, not the object’s contents, and when you view and expand the logged reference, you’re viewing what that reference points to at the time you look at it, not the time you logged it. This might be nothing if it has been removed from memory or reassigned.
Variables pointing to primitives like strings and numbers point to values not references, so you could also:
- log a stringified version of the object, like
console.log(JSON.stringify(someObject))(although that output may be harder to read). - if the object’s properties are all primitive, log a shallow clone like
console.log({ ...someObject })(though any properties that are objects may face the same problem)
The debugger approach is usually better.
Old question. But this simple solution worked better for me. Use
function(e) {
console.dir(e);
}
I just came across this question with a problem I had where my API PUT request was showing as cancelled in my console tab in chrome dev tools and I was seeing the same behavior where I couldn’t expand the object and the little i icon was showing next to the console entry. I decided to post this answer with a link to my question in case it might help anyone else.
Api PUT request showing as “cancelled” with error message “TypeError: failed to fetch”
