Die Chrome-Entwicklertools sind schnelllebig und wir möchten Sie auf einige neue Funktionen und Verbesserungen aufmerksam machen, die wir für einige Komponenten eingeführt haben. Wir sprechen über einige Änderungen an der Benutzeroberfläche, die Erstellung hochauflösender JS-Profile und neue Funktionen für Arbeitsbereiche.
- Hochauflösende Profile jetzt auf 0,1-Millisekunden-Genauigkeit
- Die Symbolleisten stiegen oben in die Entwicklertools und die Überschreibungen wurden in die Konsolenleiste verschoben.
- Arbeitsbereichen wurden mehrere Funktionen hinzugefügt, die das Hinzufügen, Entfernen und Suchen von Dateien unterstützen
Hochauflösende Profile
Die CPU-Profilerstellung ist eine ziemlich nützliche Funktion, um zu sehen, wie effizient Ihr JavaScript ist. Zusätzlich zu den herkömmlichen Profilansichten haben wir diesen Sommer ein Flame-Diagramm eingeführt, in dem die JavaScript-Verarbeitung einer Seite im Zeitverlauf visuell dargestellt wird. Sie können damit ganz einfach sehen, wie tief Ihr Aufrufstack ist und wie lange die Verarbeitung der einzelnen Funktionen dauert.
Bis vor Kurzem zeigten sowohl die herkömmliche Heavy- (Bottom-up)- und Tree-Darstellung (Top-down) als auch das Flame-Diagramm nur Prozesse mit einer Genauigkeit von einer Genauigkeit von einer Millisekunde. Bei den meisten Anwendungen ist dies in Ordnung. Wenn Sie jedoch an etwas arbeiten, bei dem Geschwindigkeit in der Benutzeroberfläche wirklich wichtig ist, wie z. B. bei einem Spiel, kann die Auflösung von 1 Millisekunde zu unübersichtlich sein, um aussagekräftige Ergebnisse für die langsame Website oder für Ihre Benutzeroberfläche zu erhalten. So aktivieren Sie die Profilerstellung in hoher Auflösung (derzeit nur Canary):
- Öffne die Entwicklertools-Einstellungen.
- Aktivieren Sie auf dem Tab Allgemein unter Profiler die Option CPU-Profilerstellung mit hoher Auflösung.
Hier ist ein Beispiel für ein Flame Chart, das bei normaler Profilerstellung und mit hoher Auflösung zu sehen ist und bei dem für das Laden der HTML5Rocks.com-Startseite ein Profil erstellt wird:
Bei normaler Profilerstellungsauflösung wird die Prozesszeit immer auf die nächste Millisekunde aufgerundet. Ein Prozess, der nur 0,1 Millisekunden oder weniger dauert, wird also mit 1,0 Millisekunden gemeldet und andere Prozesse werden möglicherweise überhaupt nicht im Aufrufstack angezeigt.
Die Profilerstellung mit hoher Auflösung verursacht in der JavaScript-VM einen großen Mehraufwand. Daher ist sie standardmäßig deaktiviert. Sie sieht zwar sicherlich kühler als die normale Auflösung der Profilerstellung aus, wir empfehlen jedoch, sie nur zu verwenden, wenn Sie wirklich genaue Ergebnisse benötigen.
Verbesserungen an der Benutzeroberfläche der Entwicklertools
Es werden laufend neue Funktionen in Canary eingeführt. Wir möchten Sie aber auf einige wichtige Änderungen an der Benutzeroberfläche aufmerksam machen: Schaltflächen, die allgemein oben auf der Benutzeroberfläche angezeigt werden, die Navigation und Infobereiche der Zeitachse und die Verlagerung von Überschreibungen in die Konsolenleiste.
Sehen wir uns zuerst an, woher wir kommen. Da wir ohnehin schon über die Zeitachse sprechen, versuche ich, die ersten beiden Fliegen mit einem Screenshot-Paar zu töten. So sieht die Zeitachse in Chrome (stabile) aus:
Und so sieht die Zeitachse aus.
Beachten Sie Folgendes:
- Die Symbolleisten und Schaltflächen befinden sich jetzt alle oben auf dem Bildschirm, sowohl für die spezifischen Zeitachsensymbole links als auch die allgemeinen Entwicklertools rechts.
- Die Verschachtelungsstruktur der Zeitachseneinträge ist jetzt im linken Bereich zu sehen. Sie können sogar mit der Tastatur durch die Datensätze scrollen. Sie können nicht nur mit den Auf- und Ab-Tasten nach oben und unten scrollen, sondern auch mit den Nach-links- und Nach-rechts-Tasten, um verschachtelte Datensätze zu öffnen und zu schließen.
- Die Zeitangaben werden nun in einem Feld auf der rechten Seite für den ausgewählten Eintrag angezeigt. (Sie können auch den Mauszeiger auf andere Einträge bewegen, um die entsprechenden Informationen anzuzeigen.)
Werfen wir nun einen Blick auf die Konsolenleiste. Um die Konsolenleiste zu öffnen, drücken Sie in den Entwicklertools die Esc-Taste oder klicken Sie auf die Schaltfläche für die Konsolenleiste 
. Die Leiste wird dann von unten nach oben gerollt.
Dort sehen Sie standardmäßig die Tabs Konsole und Suche. Um zu den Funktionen zu gelangen, die früher als Überschreibungen bezeichnet wurden, öffne die Entwicklertools-Einstellungen und aktiviere das Kontrollkästchen neben "Ansicht 'Emulation' in Konsolenleiste anzeigen". Wenn Sie das Einstellungsfeld schließen, sehen Sie in der Konsolenleiste den Tab Emulation (Emulation), wie hier gezeigt:
Und Sie können die gesamte Emulation dort durchführen.
Der Grund für diese Änderung ist, dass Sie zuvor in den Einstellungen die Emulationsüberschreibungen ändern und dann Ihre Seite anzeigen mussten. Jetzt können Sie die Emulationsüberschreibungen anpassen und gleichzeitig Stile bearbeiten.
Verbesserte Arbeitsbereiche
Vor allem Arbeitsbereiche sind eine Funktion, die Ihren Erstellungs-Workflow etwas vereinfachen kann, aber sie wird bei Weitem nicht so viel bearbeitet, wie sie es eigentlich verdient. Mit Arbeitsbereichen können Sie Änderungen in den Entwicklertools vornehmen, im Browser anzeigen und in einer persistenten lokalen Version Ihrer Dateien speichern, ohne Chrome zu verlassen, anstatt in den Entwicklertools zu experimentieren und Änderungen vorzunehmen und Ihre Änderungen anschließend wieder in die Quelldateien einzufügen.
Wenn ihr den Artikel Chrome Developer Tools Revolutions 2013 noch nicht gelesen habt, seht euch das bitte an und schaut dann hierher zurück, um zu erfahren, wie wir diese Funktionen in den letzten Monaten verbessert haben.
Einfacheres Hinzufügen von Dateien
Zur Zeit des Revolutions-Artikels 2013 musste zum Erstellen eines neuen Arbeitsbereichs der Ordner zu den Arbeitsbereichen hinzugefügt und der Ordner anschließend einer Netzwerkressource zugeordnet werden. Wir haben diesen Vorgang auf einen einzigen Schritt vereinfacht: Klicken Sie einfach mit der rechten Maustaste in den linken Bereich von „Quellen“ und wählen Sie Ordner zu Arbeitsbereich hinzufügen aus. Daraufhin wird ein Dateidialogfeld geöffnet, in dem Sie einen neuen Ordner auswählen können, der Ihren Arbeitsbereichen hinzugefügt werden soll. Der aktuell markierte Ordner wird dabei nicht Ihren Arbeitsbereichen hinzugefügt.
Dateien erstellen und entfernen
Sie können dem lokalen Verzeichnis, das Sie für Arbeitsbereiche in Arbeitsbereichen selbst verwenden, jetzt 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 aus Arbeitsbereichen entfernen. Klicken Sie mit der rechten Maustaste auf eine Datei im linken Quellenbereich 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 direkt in Arbeitsbereichen neue Dateien erstellen (oder Dateien löschen) können, wird auch das Quellverzeichnis automatisch aktualisiert und zeigt diese neuen Dateien an. Falls nicht, 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 Ihre Dateien in einem anderen Editor öffnen und möchten, dass die Änderungen in den Entwicklertools angezeigt werden.
In Dateien suchen
Wir haben die Benutzeroberfläche für die dateiübergreifende Suche ein wenig verfeinert. Nun können Sie auch in allen Dateien in Ihren Arbeitsbereichen nach Zeichenfolgen suchen, ebenso wie in allen in die Entwicklertools geladenen Dateien. Sie können entweder nach einem String oder einem regulären Ausdruck suchen und wir gleichen jedes Vorkommen in jeder Datei oder Seite ab. So suchen Sie in mehreren Dateien in Arbeitsbereichen (derzeit in Canary):
- Öffnen Sie die Konsolenleiste durch Drücken der Esc-Taste und klicken Sie neben Console auf den Tab Suche, um das Suchfenster zu öffnen.
ODER
Drücken Sie Ctrl + Shift + F (Cmd + Opt + F auf einem Mac), um das Suchfenster zu öffnen.
- Geben Sie Ihre Anfrage in das Feld Quellen für Suche ein und drücken Sie die Eingabetaste. Wenn Ihre Abfrage ein regulärer Ausdruck ist oder die Groß-/Kleinschreibung nicht berücksichtigt werden soll, klicken Sie auf das entsprechende Feld.
Listen ignorieren
Das Durchsuchen des Textes von Dateien oder das Filtern nach Dateinamen kann sehr mühsam sein, wenn viele .git- oder README.md-Dateien Ihre Ergebnisse überladen.
Daher haben wir den Arbeitsbereichen eine Ignorieren-Listenfunktion hinzugefügt, damit Sie bestimmte Dateitypen oder Ordner beim Anzeigen und Durchsuchen Ihres Arbeitsbereichs ausschließen können.
So können Sie die aktuelle freigegebene Ignorieren-Liste in Arbeitsbereichen aufrufen und ändern:
- Öffne die Einstellungen in den Entwicklertools.
- Klicken Sie auf Arbeitsbereich.
- Unter Allgemein können Sie im Feld Ausschlussmuster für Ordner die Muster ansehen und/oder bearbeiten.
Wir liefern standardmäßig die folgenden globalen Ausschlussmuster:
Dieser reguläre Ausdruck schließt Metadaten aus Git, SVN, Mercurial, Projektdateien aus Eclipse und IntelliJ, OS X DS_Store- und Papierkorb-Dateien sowie einige andere Dinge aus, die ignoriert werden sollten, wie z. B. Cache von Sass. Der gesamte Ordner, einschließlich aller untergeordneten Elemente, wird von der Benutzeroberfläche ausgeschlossen, um weder dort noch bei der Suche in Dateien angezeigt zu werden.
Arbeitsbereichsspezifische Ignorierlisten
Sie können auch Dateien und Ordner in einem bestimmten Arbeitsbereich ausschließen, um die Suche einzugrenzen. Ausgeschlossene Ordner werden auch nicht im Quellverzeichnis angezeigt.
Um einen ganzen Ordner aus Ihrem Arbeitsbereich auszuschließen, klicken Sie im linken Quellenbereich 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:
- Öffne die Entwicklertools-Einstellungen.
- Klicken Sie auf Arbeitsbereich.
- Markieren Sie den gewünschten Ordner.
- Klicken Sie auf Bearbeiten, um das Fenster „Dateisystem bearbeiten“ zu öffnen. Hier können Sie Zuordnungen und/oder ausgeschlossene Ordner hinzufügen oder entfernen.
