It’s #FrontendFriday – Google Chrome DevTools: Drei simple Tricks für den Alltag

Die Google Chrome DevTools werden meist nur von Entwicklern verwendet, da sie beim Erstellen einer Webseite oder Web-App unterstützen. Sie bieten jedoch auch eine Reihe von Features, die für jeden nützlich sein können.

Screenshots ganzer Webseiten: Kein Plugin erforderlich

Es gibt viele Situationen, in denen man einen Screenshot von einer gesamten Webseite benötigt – sei es für eine Präsentation, zur Dokumentation oder einfach zum Teilen mit Kollegen. Einige würden nun mehrere Screenshots machen und diese dann zusammenfügen. Es gibt auch einige Plugins die dieses Problem lösen wollen, jedoch hat Google Chrome diese Funktion bereits integriert.

1. Öffne die Google Chrome DevTools
   Öffne die Webseite, von der du einen Screenshot machen möchtest, und drücke F12 oder Strg + Umschalt + I, um die DevTools zu öffnen. Alternativ kannst du auch mit der rechten Maustaste auf die Seite klicken und „Untersuchen“ auswählen.
2. Zugriff auf den Befehl „Screenshot der gesamten Seite erstellen“
   Drücke Strg + Umschalt + P, um das Befehlspalettenfenster zu öffnen. Gib „Screenshot“ in die Suchleiste ein und wähle dann „Screenshot in voller Größe aufnehmen“ aus.
3. Speichere deinen Screenshot
   Chrome scrollt automatisch durch die gesamte Seite und erfasst alles in einem Screenshot. Sobald der Vorgang abgeschlossen ist, kann ein Speicherort für den Screenshot ausgewählt werden.

Videos mit 16-facher Geschwindigkeit abspielen

Manchmal möchte man sich ein Video in kürzerer Zeit ansehen, insbesondere wenn es sich um langatmige Tutorials, Präsentationen oder Vorträge handelt. YouTube bietet hierfür eine Option, mit der man Videos in bis zu doppelter Geschwindigkeit abspielen kann. Einige andere Videoplayer bieten gar keine Option zur Anpassung der Geschwindigkeit. Wusstest du, dass du die Wiedergabegeschwindigkeit eines Videos in Google Chrome auf bis zu 16-fache Geschwindigkeit erhöhen kannst – auch bei YouTube Videos? Mit den integrierten DevTools von Chrome ist das ganz einfach möglich.

1. Öffne die DevTools
   Starte Google Chrome und öffne die Webseite mit dem Video, das du beschleunigen möchtest. Drücke F12 oder Strg + Umschalt + I, um die DevTools zu öffnen. Alternativ kannst du auch mit der rechten Maustaste auf die Seite klicken und „Untersuchen“ wählen.
2. Zum Videoelement navigieren
   Gehe im DevTools-Fenster zum „Elements“-Tab verwende den Elementsucher Strg + Umschalten + C  und klicke direkt auf das Video
3. Wiedergabegeschwindigkeit ändern
   Öffne die Konsole, indem du auf den „Console“-Tab klickst. Gib den folgenden Befehl ein, um die Wiedergabegeschwindigkeit auf das 16-fache zu erhöhen: $0.playbackRate = 16; Drücke Enter, und das Video wird nun mit 16-facher Geschwindigkeit abgespielt.
4. Geschwindigkeit anpassen
   Möchtest du eine andere Geschwindigkeit einstellen? Ersetze einfach die Zahl im Code durch den gewünschten Wert. Diese Zahl muss zwischen 1 und 16 liegen.

Webinhalte anpassen ohne zu programmieren

Hast du schon einmal eine Webseite besucht und dir gewünscht, du könntest schnell und unkompliziert Änderungen an den Inhalten vornehmen, ohne dabei in den Code eintauchen zu müssen? Mit einem einfachen Trick in Google Chrome kannst du genau das tun – und das ganz ohne Programmierkenntnisse. Der Schlüssel dazu liegt in einer wenig bekannten Funktion namens document.designMode.

Mit document.designMode kannst du den gesamten Inhalt einer Webseite in einen editierbaren Modus versetzen, ähnlich wie in einem Textverarbeitungsprogramm. So kannst du Texte ändern, Bilder verschieben oder sogar Inhalte hinzufügen, ohne den eigentlichen Code der Webseite zu bearbeiten. Hierbei ist zu beachten, dass diese Änderungen nicht persistent sind und nach einem Neuladen der Webseite wieder verschwinden. Das Feature eignet sich daher für schnelle Prototypen, Präsentationen oder einfach, um zu sehen, wie eine Seite mit anderen Inhalten aussehen könnte.

1. Öffne die Konsole in Google Chrome
   Besuche die Webseite, die du bearbeiten möchtest, und öffne die DevTools mit F12 oder Strg + Umschalt + I. Wechsle dann zum „Konsole“-Tab.
2. Aktiviere den Design-Modus
   Gib in der Konsole den folgenden Befehl ein document.designMode = 'on'; und drücke Enter:
3. Nun kannst du direkt auf der Webseite Textfelder, Überschriften und andere Inhalte bearbeiten, als wäre es ein Dokument.
4. Deaktiviere den Design-Modus
   Wenn du fertig bist, kannst du den Bearbeitungsmodus wieder ausschalten, indem du document.designMode = 'off'; in der Konsole eingibst.