Hilfreiche Ratschläge

15 Tipps und Tricks, die Sie für die Chrome Developer Tools benötigen

Pin
Send
Share
Send
Send


Es gibt viele Artikel online über die geheimen Funktionen des Chrome Developer Tools-Tools für Entwickler, und kürzlich habe ich einen designorientierten Themenhinweis gefunden. Sein Vorteil ist, dass er sehr einfache Aktionen beschreibt: Ändern der Farbe, der Klassen, des Texts auf der Seite usw. Es scheint mir, dass dies mehr praktische und nützliche Informationen sind, sowohl für Anfänger im Layout als auch für diejenigen, die regelmäßig damit arbeiten. Persönlich benutze ich 90% dieser Beispiele aktiv, aber die "Geheimnisse" sind nicht wirklich. In der heutigen Veröffentlichung werde ich einige meiner Best Practices und andere nützliche Funktionen vorstellen.

Bevor Sie Chrome Devtools verwenden können, müssen Sie es ausführen. Im Gegensatz zu vielen anderen Chrome-Erweiterungen für die Entwicklung ist dieses Tool direkt in den Browser integriert. Es gibt verschiedene Möglichkeiten, es zu öffnen:

1. Wählen Sie im Hauptmenü "Weitere Tools" und dann in der Dropdown-Liste "Entwicklertools".

2. Rufen Sie an der Stelle der für Sie interessanten Webseite das Kontextmenü auf (Text / Bild, Menü usw.) und klicken Sie dort auf den Link „Inspect Element“.

3. Es gibt Tastenkürzel:

  • Für Windows diese Kombination: "Strg + Umschalt + I" oder die "F12" -Taste.
  • Für Mac - "Cmd + Opt + I"

So bearbeiten Sie HTML / CSS-Code

Grundsätzlich ist die Hauptfunktion, für die ich Google Chrome Devtools verwende, den Code im laufenden Betrieb zu bearbeiten und die Stileinstellungen zu überprüfen. Aus allen Einschlussoptionen wähle ich den Kontextmenüpunkt „Inspect Element“ aus, weil unmittelbar bevor Sie die dem gewünschten Objekt entsprechenden Elemente öffnen.

Links sehen Sie HTML und rechts CSS. Hier können Sie neue Tags ändern und einfügen, Text bearbeiten, Stile hinzufügen / ändern usw. Und Sie sehen alle Änderungen sofort auf der Site im oberen Fenster. Übrigens zeigt CSS auch Dateien an, in denen bestimmte Regeln festgelegt sind. So können Sie den benötigten Code leichter finden.

1. Schnelle Dateiänderung

Wenn Sie Sublime Text verwendet haben, können Sie wahrscheinlich nicht ohne "Gehe zu irgendetwas" leben (Anmerkung des Übersetzers: Für Idea-Benutzer heißt diese Funktion „Searching Everywhere“ (Überall suchen) und wird durch zweimaliges Drücken der Umschalttaste aufgerufen. Sie werden froh sein zu wissen, dass eine ähnliche Funktion in den Entwicklertools enthalten ist. Drücken Sie Strg + P (Cmd + P für Mac-Benutzer), wenn das Entwicklerfenster geöffnet ist, um alle Dateien in Ihrem Projekt schnell zu finden und zu öffnen.

2. Suchen Sie im Quellcode

Aber was ist, wenn Sie im Quellcode suchen möchten? Um in allen heruntergeladenen Dateien auf der Seite zu suchen, drücken Sie Strg + Umschalt + F (Cmd + Opt + F). Diese Suchmethode unterstützt auch die Suche nach regulären Ausdrücken.

3. Gehen Sie zur Zeile

Nachdem Sie die Datei auf der Registerkarte "Quellen" geöffnet haben, können Sie mit den Entwicklertools zu einer beliebigen Zeile dieser Datei wechseln. Drücken Sie dazu Strg + G für Windows und Linux (oder Cmd + L für Mac) und geben Sie die Zeilennummer ein.

Eine andere Möglichkeit besteht darin, Strg + O zu drücken. Geben Sie jedoch anstelle des zu suchenden Texts ":" und die Zeilennummer ein (Anmerkung des Übersetzers: Sie können aber noch weiter gehen und den Dateinamen und die Zeilennummer mit ":" als Trennzeichen eingeben. Die Eingabe des Dateinamens ist jedoch völlig optional. Dies ist eine Suche.

4. Abrufen von DOM-Elementen über die Konsole

Die Entwickler-Tool-Konsole unterstützt verschiedene nützliche "magische" Funktionen und Variablen für das Abrufen von DOMs:

  • $ () - Entspricht document.querySelector (). Gibt das erste Element zurück, das dem CSS-Selektor entspricht. Beispielsweise gibt $ ('DIV') das erste div-Element auf der Seite zurück.
  • $$ () - Entspricht document.querySelectorAll (). Gibt eine Liste von Elementen zurück (Anmerkung des Übersetzers: NodeList), die dem angegebenen CSS-Selektor entsprechen.
  • $ 0 - $ 4 ist der Verlauf der letzten fünf DOM-Elemente, die Sie auf der Registerkarte Elemente ausgewählt haben, wobei $ 0 das letzte ist.

Weitere Konsolenfunktionen finden Sie hier.

5. Verwenden mehrerer Wagen und Auswahlen

Wenn Sie eine Datei bearbeiten, können Sie mehrere Wagen installieren, indem Sie die Strg-Taste (Cmd für Mac) gedrückt halten und an die gewünschte Stelle klicken, damit Sie Wagen an vielen Orten gleichzeitig installieren können.

6. Protokoll aufbewahren

Wenn Sie die Option Protokoll beibehalten auf der Registerkarte Konsole aktivieren, werden die Ergebnisse gespeichert und nicht bei jedem Laden der Seite gelöscht. Dies ist praktisch, wenn Sie den Verlauf von Fehlern anzeigen möchten, die angezeigt werden, bevor Sie die Seite verlassen.

(Anmerkung des Übersetzers: Eine ähnliche Eigenschaft befindet sich auf der Registerkarte Netzwerk. Wenn es aktiviert ist, wird der Abfrageverlauf beim Navigieren zwischen den Seiten nicht mehr gelöscht. Wenn die Seite jedoch auf die Weiterleitung mit JavaScript eingestellt war und eine andere Anforderung ausgeführt wurde, ist es fast immer unmöglich, das Ergebnis dieser Anforderung anzuzeigen. Vergessen Sie nicht, diese Eigenschaften während des langen Debuggens zu deaktivieren! Entwicklertools verbrauchen fast immer mehr Systemressourcen als die Seite selbst!)

7. Prettifikation minimierter Quellen

Die Chrome Developer Tools verfügen über einen integrierten "Pretender" für minimierte Quellcodes, um ein lesbares Erscheinungsbild zu erzielen. Die Schaltfläche befindet sich in der unteren linken Ecke der Datei, die derzeit auf der Registerkarte Quellen geöffnet ist.

(Anmerkung des Übersetzers: Manchmal ist es nicht möglich, diese Eigenschaft automatisch zu aktivieren (z. B. in FireFox).

8. Gerätemodus

Die Entwicklertools enthalten einen leistungsstarken Modus zum Entwickeln von Seiten, die für Mobilgeräte optimiert sind. In diesem Video von Google werden die meisten erweiterten Funktionen veranschaulicht, z. B. das Ändern der Bildschirmauflösung, das Emulieren einer Berührung auf dem Touchscreen und das Emulieren einer Netzwerkverbindung von geringer Qualität.

9. Emulation von Gerätesensoren

Eine weitere coole Funktion des Gerätemodus ist die Fähigkeit, die Sensoren mobiler Geräte wie Touchscreens und Beschleunigungsmesser zu simulieren. Sie können sogar Ihre geografischen Koordinaten angeben. Das Objekt befindet sich im unteren Bereich der Registerkarte Elemente unter Emulation -> Sensoren.

10. Farbauswahl

Wenn Sie im Stil-Editor eine Farbe auswählen, können Sie auf das Farbfeld klicken und ein Farbauswahlfenster wird angezeigt. Während dieses Fenster geöffnet ist, verwandelt sich Ihr Mauszeiger in eine Lupe, um die Farbe auf der Seite pixelgenau auszuwählen.

12. Schatten-DOM anzeigen

Elemente wie Eingabefelder und Schaltflächen, Browser, erstellen aus anderen Grundelementen, die normalerweise ausgeblendet sind. Sie können jedoch zu Einstellungen -> Allgemein gehen und das Schatten-DOM des Benutzeragenten anzeigen aktivieren, um diese grundlegenden Elemente auf der Registerkarte Elemente anzuzeigen. Dies gibt Ihnen die Möglichkeit, diese individuell zu gestalten.

14. Ändern Sie das Farbformat

Mit Umschalt + Klick auf das Farbfeld im CSS-Bearbeitungsfeld wird das Farbformat in RGBA, HSL hexadezimal geändert (Anmerkung des Übersetzers: gleichzeitig als hexadezimal abgekürzte und die vollständige Form und sogar im Kapitalregister. Wenn dies nicht zu Ihnen passt, versucht der Browser, die angegebene Farbe in der Liste der Standardfarbkonstanten zu finden. Der einzige Nachteil dieser Funktion ist, dass Sie zur Auswahl des gewünschten Formats häufig alle anderen möglichen Optionen "knacken" müssen.

15. Lokale Dateien im Arbeitsbereich bearbeiten

Arbeitsbereiche sind eine leistungsstarke Symbolleiste für ein Entwicklerfenster, mit der Entwicklerwerkzeuge in eine IDE verwandelt werden. Der Arbeitsbereich enthält die Dateistruktur auf der Registerkarte Quellen entsprechend der Struktur Ihres lokalen Projekts. Sie können sie jetzt direkt bearbeiten und speichern, ohne die Änderungen kopieren und in einen externen Texteditor einfügen zu müssen.

Um Arbeitsbereiche einzurichten, wechseln Sie zur Registerkarte Quellen (Anmerkung des Übersetzers: Aktivieren Sie die Navigationsleiste, wenn sie ausgeblendet ist. Klicken Sie dazu auf die Schaltfläche Navigator anzeigen in der oberen linken Ecke der Registerkarte, und klicken Sie mit der rechten Maustaste auf eine beliebige Stelle im Navigatorfenster, oder ziehen Sie einfach das gesamte Projektfenster in das Entwicklerfenster. Der ausgewählte Ordner, seine Unterverzeichnisse und alle darin enthaltenen Dateien können nun bearbeitet werden, unabhängig davon, auf welcher Seite Sie sich befinden. Für noch mehr Komfort können Sie die auf dieser Seite verwendeten Dateien verwenden, mit denen Sie sie bearbeiten und speichern können.

UPD. Anmerkung des Übersetzers:

Auf den hinzugefügten Ordner kann über alle Registerkarten zugegriffen werden. Wenn Ihr Projekt mehr als eine HTML-Datei enthält, reicht es aus, sie in einem benachbarten Browser-Tab zu öffnen.

Hier erfahren Sie mehr über Arbeitsbereiche.

Emulation von Bildschirmgrößen, Geräten

In dem Artikel zum Anzeigen der Website mit verschiedenen Bildschirmauflösungen habe ich verschiedene Dienste zum Thema erwähnt, obwohl die Aufgabe mit dem Entwickler-Tool von Google Chrome Devtools noch einfacher gelöst werden kann.

In der unteren linken Ecke befindet sich eine Schaltfläche zum Umschalten des Bildschirms auf die mobile / flexible Version, mit der Sie die Größe des Browserfensters festlegen können. Zur Vereinfachung werden die Parameter von Smartphones (Pixel, iPhone) und Tablets (iPad) automatisch dort aufgelistet. Sie können jedoch beliebige Werte für Breite und Höhe festlegen. Mit dieser Funktion suche ich normalerweise während der Entwicklung nach Fehlern im Responsive Design.

Schnelles Bearbeiten von Inhalten (designMode)

Der Inhalt moderner Vorlagen ist in der Regel dynamisch, daher sollte sich das Design an die verschiedenen Situationen und die Länge der Texte anpassen. Manchmal kann die Eingabe einer ausreichend großen Zeile das Erscheinungsbild der Seite stören.

Um zu überprüfen, ob alles in Ordnung ist, können Sie den Inhalt / die Überschriften direkt im Browser bearbeiten. Gehen Sie dazu zur Registerkarte „Console“, in der Sie die Anweisung document.designMode = „on“ schreiben, und drücken Sie die Eingabetaste.

Anschließend können Sie die Inhaltsseite im oberen Fenster bearbeiten. Eigentlich habe ich einen ähnlichen Trick benutzt, aber ich habe alles in der HTML-Registerkarte gemacht, aber irgendwie ist es natürlich visueller und effektiver.

Gegenstände verstecken

Diese Methode ist nützlich, um das Erscheinungsbild des Layouts schnell zu ändern, wenn Sie sehen möchten, wie es ohne Objekt aussieht. Der zweite Grund, warum ich den einen oder anderen Teil der Vorlage entferne, ist die Notwendigkeit, einen Screenshot ohne ihn zu machen. Früher habe ich das Objekt einfach aus HTML gelöscht, aber es hat sich herausgestellt, dass es eine bessere Methode gibt - wählen Sie das Element aus und klicken Sie auf die Schaltfläche "h". Tatsächlich aktiviert diese Aktion die Sichtbarkeits-CSS-Eigenschaft.

Schnelle Klassenumschaltung

Wenn Sie mehrere Entwurfsoptionen vergleichen müssen, können Sie dies über Google Chrome Devtools sehr klar implementieren. Dazu müssen Sie zuerst die entsprechenden Stile vorschreiben lassen. Nehmen Sie als Nächstes entweder Änderungen direkt am HTML-Code vor oder verwenden Sie eine schönere Lösung:

Sie können es in diesem Beispiel mit Codepen testen. Aktivieren Sie im rechten Fenster die Option ".cls" und schreiben Sie dann in die Zeile den Namen der gewünschten Klasse und drücken Sie die Eingabetaste - diese wird der Schalterliste hinzugefügt. Dann einfach die entsprechenden Kästchen abhaken / ankreuzen.

CSS visueller Editor

Für einige Eigenschaften von CSS-Stilen verfügt das Chrome Developer Tool über spezielle Dialogfelder mit Einstellungen, die das Leben von unerfahrenen Benutzern erheblich vereinfachen. Wenn Sie den Mauszeiger in die untere rechte Ecke bewegen, wird dort ein Symbol mit drei Punkten angezeigt, und wenn Sie den Mauszeiger darüber halten, wird ein zusätzliches Funktionsmenü angezeigt.

Sie ermöglichen Ihnen die Verwaltung von Optionen wie:

  • Textschatten - der Schatten des Textes,
  • Kastenschatten - der Schatten des Blocks,
  • Farbe - Inhaltsfarbe
  • Hintergrundfarbe - Hintergrundfarbe.

So sehen diese Hilfsprogramme aus:

Sie werden nicht nur aufgerufen, um Eigenschaften zu erstellen, sondern auch, wenn Sie sie bearbeiten. Alle Werte sind sofort auf der Seite sichtbar, sodass Sie verschiedene Designoptionen in Echtzeit testen können. Anfänger Webmaster / Designer sind sehr praktisch.

Zum Schluss noch ein nützliches Video zum Thema:

Total Diese Erweiterung für Chrome enthält viele weitere nützliche Funktionen. Daher denke ich, dass ich den Artikel in Zukunft um ein paar weitere Life-Hacks ergänzen werde. Ich empfehle auch, die offizielle Dokumentation zu lesen, in der alle Optionen und Schulungshandbücher erläutert werden.

Verwenden Sie in Ihrer Arbeit die Google Chrome Developer Tools? Vielleicht kennen Sie noch andere interessante Verwendungsmöglichkeiten?

Pin
Send
Share
Send
Send