Why can't I extend this event object in the Chrome console?

Question

Simply put, I run this in the console:

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

But in the console, when an event occurs (trying to "leave the page" in the middle of writing the SO question), I see the following:

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

With a small image of "I" next to him. When I click the arrow next to it to expand an object in the console, nothing happens. The arrow rotates to indicate that it has expanded, but is not expanding.

What am I missing here ??

Answer 1

This is because, although you allow the console to persist after page changes, the Object no longer exists - it was destroyed when you left the page. This means that it simply can’t be checked anymore, so clicking the triangle down does not help.

Try this instead to prevent the page from changing:

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

Now the page will ask you what to do. Click "Cancel" in the prompt that appears to stay on the page. Now you can view the Event in the console as desired.

The difference is that the onbeforeunload function now returns a value that is not null / undefined . The return value can be anything, even '' or false , etc. ... anything but null and undefined , and it will still cause the page to be requested before passing, which will give you the opportunity to check the event. Remember that in the absence of a return statement, JavaScript functions return undefined by default.

Whenever you cannot check something in Chrome Dev Tools, 90% of the time it happens because some action made this thing become inaccessible ... the page has moved from the moment when this object existed.

Answer 2

Old question. But this simple solution worked better for me. Use

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

Answer 3

I just came across this issue with a problem that I had when my PUT API request showed up as cancelled on the console tab in Chrome Dev tools, and I saw the same behavior when I could not expand the object and a small i icon was displayed next to it with console recording. I decided to post this answer with a link to my question in case it can help anyone else.

Api PUT request displayed as "canceled" with the error message "Input error: could not be received"