Touch Event Inspector

How the Touch Event Inspector Works

Watch the events sent by the browser as you touch the pad. Check each event type, contact ID and time. Follow one touch from its start to its end.

1. Touch the test area: Each touch fires a series of events.
2. Read the event list: Each row shows event type, timestamp, pointer ID and pointer type.
3. Expand an event: Open a row to see X, Y, width, height, pressure, tilt and buttons.
4. Filter events: Show only pointer events, touch events or mouse events.

Touch Event Inspector Formula

The event rate is the number of events divided by the test time. A time gap is the later time minus the earlier time.

performance.now()

Current time in the page, in milliseconds

event.timeStamp

Time the browser created the event

Example: An event has timeStamp = 15,204.3 ms and the handler reads performance.now() = 15,209.1 ms. Latency = 4.8 ms.

Touch Event Inspector Reference Table

This table lists the touch events and the details to look for in each one.

About the Touch Event Inspector

An event inspector is a way to view the messages a browser sends as you touch, move or lift a finger.

Each touch has an ID. Use that ID to follow the same finger through the log. A time stamp helps show the order of the events and the gaps between them.

Ways to Use the Touch Event Inspector

Use the event log to find bugs, learn about touch input or compare devices. Here are five examples.

• ✓Event-order debugging: Developers see which event fires first on each browser.
• ✓Stylus property checks: Testers confirm pressure and tilt values arrive.
• ✓Latency measurement: Engineers measure the delay from event creation to handling.
• ✓Teaching input APIs: Instructors show students live event data.
• ✓Bug reports: Users copy event logs into support tickets.