Einschalten
Screencast in der Toolbar anklicken oder Debug › Screencast ein/aus (⇧⌘P) wählen. Die Vorschau erscheint links neben den DevTools. Sie ist anfangs aus und merkt sich ihren Zustand.
Was sie zeigt
Die Vorschau zeigt den sichtbaren Bereich der Seite (ihren Viewport): Scrollposition, Animationen und Eingaben am Gerät. Statusleiste, Safari-Adressleiste und Bildschirmtastatur des Geräts zeigt sie nicht.
Die Breite lässt sich am Teiler ziehen. Die DevTools behalten mindestens 40 Prozent des Platzes, die Vorschau mindestens 25 Prozent.
Die Seite bedienen
- Klicken oder Tippen in der Vorschau klickt auf der Seite.
- Scrollen mit Mausrad oder Trackpad.
- Tippen, solange die Vorschau den Fokus hat.
- Die Leiste über der Vorschau hat Zurück, Vor, Neu laden und eine Adresszeile.
- Im Inspect-Modus des Elements-Panels hebt die Vorschau das Element unter dem Zeiger hervor, ein Klick wählt es aus.
Je Plattform
Chrome und Android liefern die Bilder selbst. Für iOS – Simulator und Gerät – erzeugt Tapscope sie aus Schnappschüssen der Seite: ein neues Bild nur bei Änderungen, sonst etwa einmal pro Sekunde geprüft. Im Simulator und per USB sind das rund 12 Bilder pro Sekunde; per WLAN weniger.
Liegt die Seite im Hintergrund oder ist das Gerät gesperrt, zeigt die Vorschau The tab is inactive statt eines eingefrorenen Bildes.
Mit React DevTools
Bei eingeschaltetem Screencast erscheint die Vorschau auch im React-Bereich links neben den React DevTools. Siehe React DevTools.