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?
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.
I know you're talking about Chrome, but Firefox has this functionality:
Related
I have developed a webapp which we usually run on an ipads browser, usually Chrome. There is a problem for a older users when they need to press on a button. They usually press hard and longer than average users, thus the click never gets registered.
The app is an angular app and I've tried to bind a (mousedown) event in hopes of making it fire the event when first touch it. But it seems like that when you hold it down longer on an ipad, it just starts to focus on the text.
Any ideas on how to improve the UX in this case? A lot of older users gets frustrated because to them it does not work.
When you hold your finger on the button you may never reach the mouse events, especially if you move your finger a little. You may check the order of events here https://patrickhlauke.github.io/touch/tests/event-listener_all-no-timings.html
To handle your issue you may handle either pointerdown or touchstart event.
There is a button in the middle of an app. After you touch the screen and click on it, you receive a click event on the button. What happened in the middle?
I used to face a bug, use the UIWebView, one input element in an HTML can't response the click event, but the WkWebview can.
Now I want to confirm the question below:
What happened from you touch the screen till iOS app receive the click event?
After I had viewed the Woodstock's answer. I edit this question.
Don't consider the hardware, just think the iOS system.
There are multiple events triggered, for example:
Finger down, Finger moved, Finger Up.
Additionally there are events for where that occurred, e.g. inside or outside a control.
If you are asking what's happening in the quantum between contact with the capacitive display and the processing of the event by iOS this is not well defined.
Suffice to say, clock cycles and processing :)
I often:
turn off throttling through dropdown
hit refresh
turn on throttling
through dropdown
It's a bit of a task each time! I can't just click the 'phone' button because that doesn't load the page properly when refreshing
Is there a hotkey to enable/disable ONLY throttling, not phone view, not dev-tools in general, but SPECIFICALLY and ONLY throttling?
Chrome fixed this. They now have an 'offline' checkbox within network, and it is now separated from the phone view.
It's still 3 clicks, but no longer 5 clicks + scrolling/picking from a dropdown
What would be great would be a way to control developer tools from the page javascript, basically telling the page when to go offline. This way, you could refresh and never touch the offline button, 1 click.
i have a simple system to register who is present at a party.
I created an easy numkeypad with buttons, and that works. But when I try it in Safari (or any other mobile browser), it takes about a second before I can press the next button. It has to be quick, so this is too long.
Is there any way to shorten this "waiting" time between button presses.
click events are delayed in mobile browsers due to the fact the browser has to ensure the user isn't double-tapping or tap-holding an element.
I have written a jQuery plugin that can handle touch and mouse events in a convenient way, and allows you to bind one event to trigger without a delay (tap). You can check it out here:
https://github.com/benmajor/jQuery-Mobile-Events
I have a very simple Chrome extension which produces a bubble pop-out in the top-right of the screen. In the bubble I present the mobile version of our site.
Currently when the extension icon is clicked the bubble pops out and the mobile homepage loads. The user can click around within the bubble and use the mobile site as they wish.
However, once the user clicks outside the bubble is closes. Clicking again repeats the above process.
I wondered if there was a way to make the bubble pop-up/out persistent? So, instead of it disappearing when the user clicks elsewhere it stays loaded until the user clicks the extension icon again. This way the button acts as an on/off switch rather than a single event trigger.
Is this possible, and would someone mind directing me to the code which would help me do this?
As stated in the FAQs, this is not possible. However, chrome.windows.create may meet your needs.