Analyze a mouse click in perfomance tab of DevTools

Question

I am trying to analyze what happens when I click a button in my web page. After clicking the button, a spinner element will show up.

The problem is, there is a short delay between the click and the spinner. And the delay varies. I wish to measure the time elapsed between the click and spinner appearance.

So, I'm recording the page using the Performance tab of DevTools. I can see Mouse Move in the Interactions section, but I cannot find the mouse click.

There are some good questions on using the DevTools here and here but not quite what I need.

How can I capture the moment of the click?

A click is basically a `MouseDown` followed by a `MouseUp`. Do you have these mouse events in your log? — Trinopoty, Feb 26 '20 at 17:01

score 2 · Answer 1 · answered Feb 27 '20 at 07:54

2

Here is what I got from Chrome Performance when I clicked I'm feeling lucky button. You can see "Mouse Down" event.

But you should know the statistics is less reliable than logging a time between the events you expect to track.

answered Feb 27 '20 at 07:54

Wenbo

654
2
12

Thanks, however, I was not able to see the mouse down event and now the page I was testing is unavailable to me. – Mate Mrše Feb 27 '20 at 13:57

score 1 · Answer 2 · answered Feb 26 '20 at 20:30

1

I know you're talking about Chrome, but Firefox has this functionality:

answered Feb 26 '20 at 20:30

Ulisses Caon

179
2
9

Analyze a mouse click in perfomance tab of DevTools

2 Answers2