JavaScript: console.log can it print the full (non-truncated) output of a JS event?

Question

When I do console.log(e), I get:

PointerEvent {isTrusted: true, pointerId: 1, width: 1, …}

Is there a way to print the full output and remove the elipsis (…)? Note: I'd like to print all the properties of an event object.

Perhaps superfluous background information, but my motivation for this is: I want to resimulate the events in a JS script that automates all the events and I want the events that I create to be exactly the same (I want to do this in vanillaJS as I can't use Selenium or those type of things for this).

I am logging a massive amount of mousemove events, and I want to have all the data of the object. Hmm... I suppose I should stringify it. — Melvin Roest, Oct 14 '19 at 22:56
You can use `console.dir` instead of `console.log` as seen here: [_"How to show full object in Chrome console?"_](https://stackoverflow.com/questions/4482950/how-to-show-full-object-in-chrome-console) — Mr. Polywhirl, Oct 14 '19 at 22:56
Possible duplicate of [How to show full object in Chrome console?](https://stackoverflow.com/questions/4482950/how-to-show-full-object-in-chrome-console) — Mr. Polywhirl, Oct 14 '19 at 22:56
I tried that before asking the question, `console.dir` didn't work in Chrome, maybe other browsers. — Melvin Roest, Oct 14 '19 at 22:57
I tried all the answers of the previous question. I do think it's the same question, but since I want to print an event object, it's more difficult. I think I'd need to write my own logging function, and do an `Object.entries`? I wish there was default functionality for this, but I'm doubting it. — Melvin Roest, Oct 14 '19 at 23:00
`console.table` shows an expanded object but it takes up a lot of space. Also, `console.dir` is certainly in chrome. I am using it now. — Ronnie, Oct 14 '19 at 23:54

score 1 · Answer 1 · answered Oct 14 '19 at 22:58

1

You can expand it just by clicking that elipsis or the arrow at the beginning of the line. If you want to show only custom properties, try to use console.log(JSON.stringify(e, null, ' ')).

answered Oct 14 '19 at 22:58

Victor

5,493
1
27
28

But I'm printing out hundreds of mousemoves at once. I am not going to click that a 100+ times. – Melvin Roest Oct 14 '19 at 22:59
@MelvinRoest In this case use `JSON.stringify` and print only what you need. – Victor Oct 14 '19 at 23:01
There are tons of practical solutions to my problem, but I figured: it should be possible to automatically print out all the values of a JS event, wouldn't it? It would be quite handy if one wants to capture all the data of it. – Melvin Roest Oct 14 '19 at 23:04
@MelvinRoest Check [this answer](https://stackoverflow.com/a/34519193/230983) about how to convert an event to JSON (make sure to check the 2019 Update). By the way, I think it will be hard enough to debug such events if you will print all properties. My advice is to print only things you really need. – Victor Oct 14 '19 at 23:15
Yea, I will, but I'd figure that there would be some in-browser setting that you could change? My screen is half empty, since it doesn't completely fill up to the right side. – Melvin Roest Oct 14 '19 at 23:31

Melvin Roest · Answer 2 · 2019-10-14T23:40:38.800

I tried a couple of things, all with their own drawbacks and advantages.

I used

const newEvent = {};
for (var property in e) {
  newEvent[property] = e[property];
}

and in other cases

const entries = [];
for (var property in e) {
  entries.push(property);
  entries.push(e[property]);
}

Simply logging the entries array, yields about a 70+ key/value pairs, there were a 133 items in the array (no clue why the number was odd). It is possible to print it the array (or the object) out in JSON but it was a horrible experience, because the stringification gets ugly when you're replacing circular references (it can be done, but the formatting is not what I was looking for).

Eventually I hacked it with the following code:

const entries = [];
const entries2 = [];
let i = 0;
for (let property in e) {
  i++;
  if (i <= 40) {
    entries.push(property);
    entries.push(e[property]);
  }
  if (i > 40) {
    entries2.push(property);
    entries2.push(e[property]);
  }
}
console.log(i, entries, entries2);

The generalization of this code would chop up the array indefinitely at around 30 key/value pairs.

JavaScript: console.log can it print the full (non-truncated) output of a JS event?

2 Answers2