Turn it on
Click Screencast in the toolbar or choose Debug › Toggle Screencast (⇧⌘P). The preview appears to the left of the DevTools. It starts switched off and remembers its state.
What it shows
The preview shows the visible area of the page (its viewport): scroll position, animations and input on the device. It does not show the device’s status bar, Safari’s address bar or the on-screen keyboard.
Drag the divider to change the width. The DevTools keep at least 40 percent of the space and the preview at least 25 percent.
Control the page
- Click or tap in the preview to click on the page.
- Scroll with the mouse wheel or trackpad.
- Type while the preview has focus.
- The bar above the preview has back, forward, reload and an address field.
- In the Elements panel’s inspect mode, the preview highlights the element under the pointer, and a click selects it.
Per platform
Chrome and Android send the frames themselves. For iOS – simulator and device – Tapscope builds them from snapshots of the page: a new image only when something changed, otherwise it checks about once per second. In the simulator and over USB that is around 12 frames per second; Wi-Fi is slower.
When the page is in the background or the device is locked, the preview says The tab is inactive instead of showing a frozen image.
With React DevTools
With the screencast on, the preview also appears in the React tab, to the left of the React DevTools. See React DevTools.