Aktuelle Neuigkeiten zu den DevTools
Das erste Neuigkeitselement in diesem Beitrag ist ein wenig meta: Es handelt sich um dieses Update selbst. Ab und zu, aber mindestens einmal im Monat, fasse ich die neuesten Entwicklungen in den Chrome DevTools zusammen.
Und wenn ich sage, dass sie frisch sind, dann meine ich das auch so: Ich werde über neue Funktionen sprechen, die gerade erst in Chrome Canary eingeführt wurden. Wenn Sie lieber bei der stabilen Version bleiben möchten, ist das auch in Ordnung. Wenn du aber mutig bist und auf dem Laufenden bleiben möchtest, sind diese Beiträge genau das Richtige für dich. Neben den neuesten Funktionen und Fehlerkorrekturen findest du am Ende jedes Beitrags den Abschnitt Community-Updates. Dort werden die besten Beiträge unserer Nutzer hervorgehoben.
Kommen wir nun zu den Neuigkeiten.
Neu in den Entwicklertools
Filmstreifenähnliche Screenshots in „Netzwerk“ und „Zeitachse“
Vor einer Woche haben wir eine wichtige neue Funktion aus der Testphase entlassen: die Möglichkeit, Screenshots der Seite sowohl auf dem Tab „Netzwerk“ als auch auf dem Tab „Zeitachse“ zu erstellen.
Klicken Sie im Bereich Netzwerk auf das kleine Kamerasymbol, um die Aufnahme von Frames zu aktivieren. Laden Sie dann die Seite neu, um die Aufnahme auszulösen. Außer Screenshots, die mit anderen Tools wie WebPageTest aufgenommen wurden, werden derzeit nur Frames angezeigt, die tatsächlich aus einem Paint-Programm stammen.
Wenn Sie auf einen der Frames doppelklicken, wird eine gezoomte Ansicht angezeigt. Mit den Pfeiltasten nach links und rechts können Sie sich dann durch die Ansicht bewegen. Wenn Sie den Mauszeiger auf einen Frame bewegen, werden Linien im Bereich und auf der Zeitachse angezeigt, die genau zeigen, wann der Frame erfasst wurde. So können Sie ihn mit der Ladesequenz in Beziehung setzen. Das erleichtert die Behebung häufiger Ladeprobleme wie renderblockierender Web-Schriftarten.
Im Bereich Zeitachse können Sie die Erstellung von Screenshots aktivieren, indem Sie das Kästchen „Screenshots“ in der oberen Symbolleiste aktivieren. Im Vergleich zum Bereich „Netzwerk“ funktioniert das hier etwas anders: In diesem Fall versuchen wir, so oft wie möglich Screenshots zu erstellen – unabhängig von den tatsächlichen Paints –, damit wir diese Screenshots auf einer linearen Zeitachse ablegen können, die mit den anderen Zeilen in der Zeitachse übereinstimmt. Anstatt doppeltklicken zu müssen, um eine Vorschau zu sehen, werden herangezoomte Frames eingeblendet, wenn der Mauszeiger darauf bewegt wird.
Da die beiden Versionen in Bezug auf Funktionalität und UX etwas auseinanderdriften, möchten wir Sie bitten, die Funktionen auszuprobieren und Feedback zu geben. Sie können dazu Tickets unter crbug.com/new erstellen oder @ChromeDevTools auf Twitter kontaktieren.
Netzwerkdrosselung im Bereich „Netzwerk“
Die Netzwerkdrosselung, eine Funktion, die wir mit der Einführung des Gerätemodus hinzugefügt haben, ist jetzt auch in der Symbolleiste des Netzwerkbereichs verfügbar. So können Sie sich an einem Ort auf die Netzwerkoptimierung konzentrieren.
Diese neue Startseite ist jedoch nur ein Spiegel: Sie ist auch außerhalb des Gerätemodus verfügbar, da die Simulation einer schlechten Verbindung bei der Arbeit an der Responsivität Ihrer Website weiterhin sehr wichtig ist.
Und schließlich: Gehören Sie zu den armen Seelen, die sich nach einem langen Arbeitstag gefragt haben, warum ihre Internetverbindung unterbrochen ist, nur um festzustellen, dass sie vergessen haben, die Netzwerkdrosselung zu deaktivieren? Wenn die Netzwerkdrosselung aktiviert ist, wird auf dem Tab „Netzwerk“ jetzt ein Warnsymbol angezeigt.
Verschiedenes
- Du hast die komischen Kreise auf der Zeitachse des Netzwerks gehasst? Das haben wir auch. Das sind die Zeitpunkte, zu denen ein Frame (im neuen Filmstreifen) aufgenommen wurde. Jetzt werden sie als Linien angezeigt, wenn Sie den Mauszeiger darauf bewegen.
- Im Gerätemodus wird die Ausrichtung jetzt beibehalten, wenn Sie zwischen Geräten wechseln.
Community Heartbeat
Chrome-Entwicklertools im Detail
Bret Little hat diesen netten kleinen Leitfaden veröffentlicht, in dem Sie mit den grundlegenden Funktionen von DevTools vertraut gemacht werden. Er bietet aber auch viele detaillierte Tipps und Tricks. Es gibt dort definitiv nützliche Informationen und mehr DevTools-Dokumente können nie schaden.
Eine IDE in den Entwicklertools…?!
Kenneth Auchenberg, Webentwickler und DevTools-Fan, hat vor einigen Monaten eine Proof-of-Concept-Standalone-DevTools-App entwickelt. Sein Blogpost war diese Woche wieder einmal in den (Hacker-)Nachrichten.
DevTools in eine vollwertige IDE umzuwandeln, ist eine tolle Idee, von der viele unserer Teammitglieder schon einmal geträumt haben. Es wäre aber auch ein Projekt von epischen Ausmaßen.
Was ist Ihre Meinung dazu? Ist die DevTools-IDE eine Utopie oder könnte sie funktionieren? Wie sollte es aussehen? Erzählt uns davon in den Kommentaren.
Bis bald!
Paul Bakaus und das DevTools-Team