DevTools-Digest: Filmstreifen und Drosselung an einer neuen Stelle

Paul Bakaus
Paul Bakaus

Neuigkeiten zu Entwicklertools

Die erste Nachricht in diesem Beitrag ist Meta-Tag – es ist diese Aktualisierung selbst! Hin und wieder, aber mindestens einmal im Monat, fasse ich druckfrisch in der Welt der Chrome-Entwicklertools zusammen.

Und wenn ich von „frisch“ sage, meine ich es auch so: Ich spreche über neue Funktionen in Chrome Canary. Wenn Sie also lieber in einem stabilen Land bleiben möchten, ist das auch toll. Wenn Sie jedoch experimentierfreudig sind und auf dem Laufenden bleiben möchten, sind diese Beiträge genau das Richtige für Sie. Zusätzlich zu den neuesten Funktionen und Fehlerkorrekturen findest du am Ende jedes Beitrags einen Abschnitt mit Community-Herzschlägen, in dem die wichtigsten Beiträge hervorgehoben werden.

Sehen wir uns jetzt die aktuellen Nachrichten an.


Neu in den Entwicklertools

Screenshots wie mit Filmstreifen im Netzwerk und auf der Zeitachse

Vor nur einer Woche haben wir eine wichtige neue Funktion aus der Testphase entfernt: die Möglichkeit, Screenshots der Seite sowohl auf dem Tab "Werbenetzwerk" als auch auf dem Tab "Zeitachse" zu erstellen.

Klicken Sie im Bereich Netzwerk auf das kleine Kamerasymbol, um die Aufnahme von Frames zu aktivieren. Aktualisieren Sie dann die Seite, um die Aufnahme auszulösen. Abgesehen von Screenshots, die mit anderen Tools wie WebPageTest aufgenommen wurden, zeigen wir derzeit nur Frames an, die tatsächlich aus einem Paint stammt.

Wenn Sie auf einen der Frames doppelklicken, wird eine gezoomte Ansicht angezeigt (und dann mit den Links-/Rechtspfeilen navigieren). Wenn Sie den Mauszeiger darüber bewegen, werden Linien über das Panel und die Zeitachse angezeigt, um genau zu visualisieren, wann der Frame aufgenommen wurde. So können Sie die Ladereihenfolge korrelieren. Dadurch wird die Behebung häufiger Ladeprobleme, z. B. bei Webschriftarten, die das Rendering blockieren, erheblich vereinfacht.

Aktivieren Sie im Bereich „Zeitachse“ die Screenshot-Erstellung, indem Sie in der oberen Symbolleiste das Kästchen „Screenshots“ aktivieren. Hier funktioniert alles ein wenig anders als im Netzwerkbereich: In diesem Fall versuchen wir, so oft wie möglich zu erfassen – unabhängig von der tatsächlichen Farbe –, um die Screenshots auf einer linearen Zeitskala abzulegen, die mit den anderen Zeilen auf der Zeitachse korreliert. Es ist kein Doppelklick erforderlich, um eine Vorschau anzuzeigen, sondern herangezoomte Frames werden angezeigt, wenn der Mauszeiger darauf bewegt wird.

Da sich die beiden etwas voneinander unterscheiden, möchten wir Sie ermutigen, die Funktionen auszuprobieren und uns Ihr Feedback über Tickets auf crbug.com/new oder per Tweet an @ChromeDevTools zu senden.

Netzwerkdrosselung im Steuerfeld „Netzwerk“

Die Netzwerkdrosselung, eine Funktion, die wir bei der Einführung des Gerätemodus hinzugefügt haben, fand in der Symbolleiste des Steuerfelds „Netzwerk“ ihren zweiten Platz. So können Sie sich an einem zentralen Ort auf die Netzwerkoptimierung konzentrieren.

Netzwerkdrosselung in Aktion

Dieses neue Zuhause ist jedoch nur ein Spiegel: Es ist auch im Gerätemodus verfügbar, da die Simulation einer schlechten Verbindung immer noch von großer Bedeutung ist, wenn Sie Ihre Website responsiv gestalten.

Haben Sie sich schließlich gefragt, warum Ihre Internetverbindung nach einem langen Arbeitstag unterbrochen wurde, nur weil Sie vergessen haben, die Netzwerkdrosselung zu deaktivieren? Auf dem Tab „Netzwerk“ wird jetzt ein Warnsymbol angezeigt, wenn die Netzwerkdrosselung aktiviert ist.

Verschiedene Tipps


Community-Herzschlag

Einfach kaputt mit den Chrome-Entwicklertools

Netzwerkdrosselung in Aktion

Bret Little hat diese nette kleine Schritt-für-Schritt-Anleitung veröffentlicht, in der Sie mit den grundlegenden Funktionen der Entwicklertools vertraut sind und auch viele detaillierte Tipps und Tricks erhalten. Dort findest du wirklich nützliche Informationen und weitere DevTools-Dokumente.

Eine Entwicklertools-IDE...?!

Kenneth Auchenberg, ein Webentwickler und DevTools-Fan, hat vor einigen Monaten eine eigenständige DevTools-Anwendung als Proof of Concept entwickelt und mit seinem Blogpost diese Woche wieder Neuigkeiten für Hacker auf sich aufmerksam gemacht.

DevTools in eine vollwertige IDE zu verwandeln, ist eine tolle Idee, von der viele unserer Teammitglieder schon einmal geträumt haben. Es wäre aber auch ein Projekt mit epischen Proportionen.


Was ist Ihre Meinung dazu? Ist die DevTools-IDE ein reiner Traum oder funktioniert sie? Wie soll das aussehen? Erzählt uns davon in den Kommentaren.

Bis bald!
Paul Bakaus und das DevTools-Team