Die Chrome DevTools entwickeln sich rasant. Wir möchten Sie auf einige neue Funktionen und Verbesserungen hinweisen, die wir bei einigen Komponenten eingeführt haben. Wir sprechen über einige Änderungen an der Benutzeroberfläche, das hochauflösende JS-Profiling und neue Workspaces-Funktionen.
- Die Auflösung des Profilings wurde auf 0,1 Millisekunden erhöht
- Symbolleisten wurden in den DevTools nach oben verschoben und Überschreibungen in den Konsolenbereich.
- In Workspaces wurden mehrere Funktionen zum Hinzufügen, Entfernen und Suchen von Dateien hinzugefügt.
Hochauflösendes Profiling
Das CPU-Profiling ist eine nützliche Funktion, mit der Sie die Effizienz Ihres JavaScript-Codes prüfen können. Zusätzlich zu den herkömmlichen Profilansichten haben wir diesen Sommer ein Flame-Diagramm eingeführt, das die JavaScript-Verarbeitung einer Seite im Zeitverlauf visuell darstellt. So können Sie ganz einfach sehen, wie tief Ihr Aufrufstapel ist und wie lange die einzelnen Funktionen dauern.
Bis vor Kurzem wurden in den traditionellen Darstellungen „Heavy“ (Bottom-Up) und „Tree“ (Top-Down) sowie im Flammendiagramm nur Prozesse mit einer Genauigkeit von einer Millisekunde angezeigt. Für die meisten Anwendungen ist das in Ordnung. Wenn Sie jedoch an etwas arbeiten, bei dem die Geschwindigkeit in der Benutzeroberfläche wirklich wichtig ist, z. B. an einem Spiel, ist eine Auflösung von 1 Millisekunde möglicherweise zu grob, um aussagekräftige Ergebnisse zu erhalten, was die Ursache für die Langsamkeit Ihrer Website oder die Verzögerung Ihrer Benutzeroberfläche ist. So aktivieren Sie das Profiling mit hoher Auflösung (aktuell nur Canary):
- Öffnen Sie die Einstellungen der Entwicklertools.
- Aktivieren Sie auf dem Tab Allgemein unter Profiler die Option Hochauflösendes CPU-Profiling.
Hier ist ein Beispiel für ein Flammendiagramm, das beim normalen Profiling und mit hoher Auflösung zu sehen ist. Hier wird das Laden der Startseite von HTML5Rocks.com erfasst:
Bei der normalen Auflösung wird die Prozesszeit immer auf die nächste Millisekunde aufgerundet.Ein Prozess, der nur 0,1 Millisekunden oder weniger dauert, wird also immer mit 1,0 Millisekunden angegeben.Andere Prozesse werden im Aufrufstapel möglicherweise gar nicht angezeigt.
Das Hochauflösungs-Profiling hat einen hohen Overhead in der JavaScript-VM. Daher ist es standardmäßig deaktiviert. Sie sieht zwar schick aus, aber wir empfehlen, sie nur zu verwenden, wenn Sie wirklich diese Genauigkeit benötigen.
Verbesserungen an der Devtools-Benutzeroberfläche
In Canary werden ständig neue Funktionen eingeführt. Wir möchten Sie aber auf einige wichtige Änderungen an der Benutzeroberfläche hinweisen: Schaltflächen werden jetzt generell oben in der Benutzeroberfläche angezeigt, die Navigation und die Informationsfelder der Zeitachse wurden überarbeitet und Überschreibungen wurden in den Console-Schieberegler verschoben.
Sehen wir uns zuerst an, wo wir herkommen. Da wir gerade über die Zeitachse sprechen, möchte ich mit zwei Screenshots zwei Fliegen mit einer Klappe schlagen. So sieht die Zeitachse derzeit in der stabilen Version von Chrome aus:
So sieht die Zeitleiste jetzt aus:
Beachten Sie Folgendes:
- Die Symbolleisten und Schaltflächen befinden sich jetzt oben auf dem Bildschirm, sowohl die für die Zeitachse links als auch die allgemeinen DevTools-Schaltflächen rechts.
- Die Zeitachsenelemente haben jetzt eine Verschachtelungsstruktur im Bereich links. Sie können sogar mit der Tastatur durch sie scrollen. Neben den Auf- und Abwärtspfeilen können Sie auch die Links- und Rechtspfeiltasten verwenden, um verschachtelte Einträge zu öffnen und zu schließen.
- Die Zeitdetails werden jetzt in einem Bereich rechts für den ausgewählten Eintrag angezeigt. Sie können auch den Mauszeiger auf andere Einträge bewegen, um Informationen zu erhalten.
Sehen wir uns nun die Konsolenleiste an. Wenn Sie die Konsolenleiste öffnen möchten, drücken Sie in den DevTools die Escape-Taste oder die Schaltfläche für die Konsolenleiste 
.
Standardmäßig sind die Tabs Console und Suche zu sehen. Wenn Sie die Funktion aufrufen möchten, die früher als Overrides bezeichnet wurde, öffnen Sie die DevTools-Einstellungen und klicken Sie das Kästchen neben „Emulationsansicht im Konsolen-Schieberegler anzeigen“ an. Schließen Sie das Einstellungsfeld. In der Konsole wird dann der Tab Emulation angezeigt, wie im folgenden Screenshot zu sehen:
Dort können Sie alle Emulationen ausführen.
Bisher mussten Sie die Einstellungen öffnen und wieder schließen, um die Emulationsumschreibungen zu ändern, und dann zurückgehen und die Seite aufrufen. Sie können jetzt Ihre Emulationsumschreibungen ändern und gleichzeitig Stile bearbeiten.
Verbesserte Workspaces
Insbesondere Workspaces sind eine Funktion, die Ihren Workflow beim Erstellen von Inhalten erheblich vereinfachen kann. Sie wird jedoch nicht annähernd so geschätzt, wie sie es verdient. Mit Workspaces können Sie Änderungen in den DevTools vornehmen, sie im Browser rendern und in einer dauerhaften lokalen Version Ihrer Dateien speichern, anstatt in den DevTools zu experimentieren und Änderungen vorzunehmen und sie dann in Ihre Quelldateien zurückkopieren und einfügen zu müssen – und das alles, ohne Chrome zu verlassen.
Wenn Sie den Artikel Chrome Developer Tools Revolutions 2013 noch nicht gelesen haben, sollten Sie das nachholen. Danach können Sie hier nachlesen, wie wir diese Funktionen in den letzten Monaten verbessert haben.
Dateien einfacher hinzufügen
Zum Zeitpunkt der Veröffentlichung des Artikels „Revolutions 2013“ musste man zum Erstellen eines neuen Arbeitsbereichs den Ordner den Arbeitsbereichen hinzufügen und ihn dann einer Netzwerkressource zuordnen. Wir haben diesen Vorgang auf einen einzigen Schritt vereinfacht: Klicken Sie einfach im linken Bereich „Quellen“ mit der rechten Maustaste und wählen Sie Ordner zum Arbeitsbereich hinzufügen aus. Daraufhin wird ein Dateidialogfeld geöffnet, in dem Sie einen neuen Ordner auswählen können, den Sie Ihren Arbeitsbereichen hinzufügen möchten. Der aktuell markierte Ordner wird nicht Ihren Arbeitsbereichen hinzugefügt.
Dateien erstellen und entfernen
Sie können dem lokalen Verzeichnis, das Sie für Workspaces verwenden, jetzt direkt in Workspaces neue Dateien hinzufügen. Klicken Sie dazu im linken Bereich „Quellen“ mit der rechten Maustaste auf einen Ordner und wählen Sie Neue Datei aus.
Sie können Dateien auch direkt in Workspaces entfernen. Klicken Sie im linken Bereich „Quellen“ mit der rechten Maustaste auf eine Datei und wählen Sie Datei löschen aus.
Sie können eine Datei auch duplizieren, indem Sie Datei duplizieren auswählen.
Aktualisieren
Da Sie jetzt neue Dateien direkt in Arbeitsbereichen erstellen oder Dateien löschen können, wird das Verzeichnis „Quellen“ auch automatisch aktualisiert und zeigt diese neuen Dateien an. Andernfalls können Sie jederzeit mit der rechten Maustaste auf einen Ordner klicken und im Pop-up-Menü Aktualisieren auswählen, um eine Aktualisierung zu erzwingen.
Das ist auch nützlich, wenn Sie Dateien, die in einem anderen Editor geöffnet sind, ändern und möchten, dass die Änderungen in den Entwicklertools angezeigt werden.
In Dateien suchen
Wir haben die Oberfläche für die Dateisuche etwas optimiert. Sie können jetzt auch in allen Dateien in Ihren Arbeitsbereichen und in allen Dateien, die in DevTools geladen sind, nach Strings suchen. Sie können entweder nach einer Zeichenfolge oder nach einem regulären Ausdruck suchen. Wir vergleichen dann alle Vorkommen in jeder Datei oder Seite. So suchen Sie in Workspaces in mehreren Dateien (aktuell in Canary):
- Öffnen Sie die Konsole, indem Sie die Escape-Taste drücken, und klicken Sie neben Console (Konsole) auf den Tab Search (Suchen), um das Suchfenster zu öffnen.
ODER
Drücken Sie Ctrl + Shift + F (Cmd + Opt + F auf dem Mac), um das Suchfenster zu öffnen.
- Geben Sie Ihre Suchanfrage in das Feld Suchquellen ein und drücken Sie die Eingabetaste. Wenn Ihre Suchanfrage ein regulärer Ausdruck ist oder die Groß-/Kleinschreibung nicht berücksichtigt werden soll, klicken Sie auf das entsprechende Kästchen.
Ignorierlisten
Das Durchsuchen des Dateitexts oder das Filtern nach Dateinamen kann sehr mühsam sein, wenn Sie eine Menge .git-Dateien oder README.md-Dateien haben, die Ihre Ergebnisse unübersichtlich machen.
Deshalb haben wir in Workspace eine Funktion für Ausblendungslisten hinzugefügt, mit der Sie bestimmte Dateitypen oder Ordner beim Ansehen und Suchen in Ihrem Arbeitsbereich ausschließen können.
So rufen Sie die aktuelle gemeinsame Ignorierliste in Workspaces auf und ändern sie:
- Öffnen Sie die Einstellungen der Entwicklertools.
- Klicken Sie auf Arbeitsbereich.
- Unter Allgemein im Feld Ordner – Muster ausschließen können Sie die Muster aufrufen und/oder bearbeiten.
Es sind die folgenden Standardmuster für globale Ausschlüsse verfügbar:
Mit diesem regulären Ausdruck werden Metadaten aus Git, SVN, Mercurial, Projektdateien aus Eclipse und IntelliJ, OS X-DS_Store- und Trash-Dateien sowie einige andere Elemente ausgeschlossen, die ignoriert werden sollten, z. B. der Cache von Sass. Der gesamte Ordner, einschließlich aller untergeordneten Ordner, wird von der Benutzeroberfläche ausgeschlossen und ist weder in der Benutzeroberfläche noch bei der Suche nach Dateien zu sehen.
Arbeitsbereichsspezifische Ignorierlisten
Sie können auch Dateien und Ordner in Ihrem Arbeitsbereich ausschließen, um die Anzahl der Suchergebnisse zu reduzieren. Ausgeschlossene Ordner werden auch nicht im Verzeichnis „Quellen“ angezeigt.
Wenn Sie einen ganzen Ordner aus Ihrem Arbeitsbereich ausschließen möchten, klicken Sie im linken Bereich „Quellen“ mit der rechten Maustaste auf den Ordner und wählen Sie Ordner ausschließen aus. So rufen Sie die Zuordnungen und ausgeschlossenen Ordner für einen bestimmten Arbeitsbereichsordner auf:
- Öffnen Sie die Einstellungen der Entwicklertools.
- Klicken Sie auf Arbeitsbereich.
- Markieren Sie den gewünschten Ordner.
- Klicken Sie auf Bearbeiten. Daraufhin wird das Fenster „Dateisystem bearbeiten“ geöffnet. In diesem Fenster können Sie Zuordnungen und/oder ausgenommene Ordner hinzufügen oder entfernen.
