Performance Hands-On 17 - Tracking iframe Communication

What You'll Learn

In this exercise, you'll learn how to use the Performance tool to track and analyze communication between a main page and an iframe using postMessage.

Instructions

1. Open DevTools (F12 or Ctrl+Shift+I / Cmd+Option+I)
2. Go to the "Performance" tab
3. Click the "Record" button (⚫) to start recording
4. Click the "Send message to iframe" button below several times
5. Click the "Send message to main frame" button in the iframe several times
6. Stop the recording by clicking the "Stop" button in DevTools

What to Look For in the Performance Panel

• Find the "Main" section in the trace and expand it
• Look for postMessage events in the timeline
• Click on a postMessage event to see details about:
  • The message content
  • The origin of the message
  • The timing between sending and processing the message
• Notice how messages are represented as arrows between frames in the timeline