Skip to main content

Incorrect event object properties in Chrome DevTools

When logging some object types in the Chrome DevTools console, you can get misleading results. Consider the following code, for getting a file from a file upload dialog shown to the user:

input.addEventListener('change', (e) => {
	console.log("Event object e: %o", e);
	console.log("Event target e.target: %o", e.target);
	console.log("File e.target.files[0]: %o", e.target.files[0]);
});

Suppose we now upload a file, triggering this input's event listener. The result of the first logging statement, logging the whole event object, looks like this:

image.png

You might therefore think that e.target is null, and that trying to access e.target.files[0] will give an error. However...

image.png

This is due (I think) to how Chrome evaluates proxy objects. If you run the exact same code in Firefox, it shows this for the event object:

image.png

Here the target contains all the child nodes like the files array. Watch out for this weird interaction, as it can throw you off course when debugging.

Back to top