Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why can't I expand this event object in the chrome console?

Tags:

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??

like image 862
temporary_user_name Avatar asked Sep 13 '13 00:09

temporary_user_name


People also ask

How do I expand all chrome console?

You can use Alt + Click in the Elements Panel to expand all child nodes. Just click on the small arrow to the left of the DOM node while holding Alt .

How do I view events in chrome console?

Right-click on the search icon button and choose “inspect” to open the Chrome developer tools. Once the dev tools are open, switch to the “Event Listeners” tab and you will see all the event listeners bound to the element. You can expand any event listener by clicking the right-pointing arrowhead.

How do you expand all inspect element?

If you hold ctrl + alt for windows (just opt on a mac) while clicking on the arrow of the element you want to expand, it will expand and all of its children will expand. So, if you ctrl + alt click on the <html> tag, that should expand the entire page.

How do I view events in browser console?

Open Google Chrome and press F12 to open Dev Tools. Go to Event Listener Breakpoints, on the right: Click on the events and interact with the target element. If the event will fire, then you will get a breakpoint in the debugger.


1 Answers

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.

like image 107
Paul S. Avatar answered Sep 21 '22 06:09

Paul S.