Aktuelle Neuigkeiten zu den DevTools
Der erste Artikel in diesem Post ist ein kleines Meta-Element, sondern nur ein Update! Hin und wieder, aber mindestens einmal im Monat, fasse ich die aktuellen Entwicklungen in der Welt der Chrome-Entwicklertools grafisch dar.
Und wenn ich von „frisch“ spreche, dann meine ich damit auch die neuen Funktionen, die neu in Chrome Canary verfügbar sind. Wenn Sie also lieber in einem stabilen Zustand bleiben möchten, ist das auch toll. 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 vereinfacht die Behebung häufiger Ladeprobleme wie renderblockierender Web-Schriftarten.
Im Bereich Zeitachse können Sie die Screenshot-Aufnahme 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.
Verschiedene Hinweise
- Du hast die komischen Kreise auf der Zeitachse des Netzwerks gehasst? Das haben wir auch. Dies 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
Schlechte Ergebnisse mit den Chrome-Entwicklertools
Bret Little hat diesen netten kleinen Leitfaden veröffentlicht, der Sie mit den grundlegenden Funktionen von DevTools vertraut macht, aber auch viele detaillierte Tipps und Tricks bietet. Hier finden Sie auf jeden Fall nützliche Informationen und weitere Entwicklertools.
Eine IDE in den Entwicklertools…?!
Kenneth Auchenberg, Webentwickler und DevTools-Fan, hat vor einigen Monaten eine eigenständige DevTools-App als Proof-of-Concept entwickelt. Sein Blogpost war diese Woche wieder einmal in den (Hacker-)Nachrichten.
Die Idee, Entwicklertools in eine vollständige IDE zu verwandeln, ist eine unterhaltsame Idee, von der viele unserer Teammitglieder zuvor geträumt haben, aber es wäre auch ein Projekt mit epischen Proportionen.
Was ist Ihre Meinung dazu? Ist die Entwicklertools-IDE ein Pipe-Dream oder funktioniert das? Wie sollte es aussehen? Erzählt uns davon in den Kommentaren.
Bis bald!
Paul Bakaus und das DevTools-Team