Tutorials, Tipps, Tricks zu den Chrome-Entwicklungstools

Google Chrome ist aufgrund seiner erweiterten Funktionen einer der beliebtesten Webbrowser für die Webentwicklung. Chrome Developer Tools können beim Debuggen sehr nützlich sein. Die meisten von uns wissen bereits, dass wir das Live -CSS mit Chrome Dev Tools bearbeiten können , aber es gibt noch weitere Tipps, die wir heute mit Ihnen teilen werden.

Tipps und Tricks zu den Chrome-Entwicklertools

Tipps zu den Chrome-Entwicklungstools

Es gibt viele unbekannte und versteckte Tricks von Chrome Dev Tools und wir werden uns die nützlichsten Tricks darunter ansehen. Um die Entwicklertools in Chrome zu öffnen , drücken Sie F12 auf Ihrer Tastatur und probieren Sie die folgenden Tricks aus.

1. Suchen und öffnen Sie eine beliebige Datei

Bei der Webentwicklung haben wir es mit vielen HTML- , CSS- , JS- und anderen Dateien zu tun. Wenn wir irgendetwas debuggen wollen, öffnen wir Chrome Dev Tools. Sie können die bestimmte Datei schnell suchen und finden, um Ihre Arbeit zu erleichtern. Drücken Sie einfach (Just)Ctrl + P und beginnen Sie mit der Eingabe des Dateinamens. Dies hilft Ihnen, die bestimmte Datei in der Liste der Dateien zu finden.

Dateien finden

2. Suchen Sie in der Quelldatei

Im vorherigen Trick haben wir gelernt, wie man nach einer bestimmten Datei sucht. Sie können sogar in allen geladenen Dateien nach einer bestimmten Zeichenfolge suchen. Drücken Ctrl + Shift + F , um in Dateien nach einer Zeichenfolge zu suchen. Es unterstützt auch reguläre Ausdrücke.

Suche in Dateien

3. Gehen Sie zu einer bestimmten Zeile

Sobald Sie eine Quelldatei geöffnet haben und zu einer bestimmten Zeile wechseln möchten, drücken Sie Ctrl + G , geben Sie die Zeilennummer ein und drücken Sie die Eingabetaste.

Gehen Sie zur Linie

4. Auswahl von DOM-Elementen auf der Registerkarte Konsole(Console)

Mit Dev Tools(Dev Tools) können Sie auch Elemente in der Konsole auswählen.

  • $() – Gibt(Returns) das erste Vorkommen des übereinstimmenden CSS - Selektors zurück.
  • $$() – Es gibt das Array von Elementen zurück, die dem angegebenen CSS - Selektor entsprechen.

Auswählen von DOM-Elementen

Weitere Konsolenbefehle finden Sie in diesem Beitrag.(this post.)

5. Verwenden Sie mehrere Caretzeichen

Manchmal möchten Sie mehrere Caretzeichen an verschiedenen Stellen setzen, und Sie können dies ganz einfach in den Chrome(Chrome Dev) -Entwicklungstools tun, indem Sie die Strg(Ctrl ) - Taste gedrückt halten und auf die Stelle klicken, an der Sie sie platzieren möchten. Beginnen Sie dann mit dem Schreiben und Sie werden sehen, dass an verschiedenen ausgewählten Stellen platziert wird.

Verwenden Sie mehrere Carets

6. Protokoll beibehalten

Protokoll(Preserve) beibehalten hilft Ihnen, das Protokoll beizubehalten, selbst wenn die Seite geladen wird. Aktivieren Sie die Option neben Protokoll(Preserve log ) beibehalten im Konsolenprotokoll(Console) und das Protokoll wird beibehalten. Dies zeigt das Protokoll vor der entladenen Seite und ist hilfreich, um die Fehler zu untersuchen.

Protokoll aufbewahren

7. Verwenden Sie den integrierten Code-Beautifier

Chrome Dev Tools verfügt über den integrierten Code-Verschönerer mit dem Namen hübscher Druck „{}“(pretty print “{}”) . Das Entwicklertool zeigt den minimierten Code und ist nicht so einfach zu lesen. Klicken Sie(Click) auf die hübsche Drucken-Schaltfläche, die unten links auf der geöffneten Quelldatei angezeigt wird, um die Quelldatei im menschenlesbaren Format anzuzeigen.

hübscher Druckknopf

8. Ist Ihre Website mobilfreundlich? Überprüfen Sie es hier

Mit Chrome Dev Tools(Chrome Dev Tools) können wir auch überprüfen, ob eine Website für Mobilgeräte optimiert ist oder nicht. Sie können überprüfen, wie Ihre Website auf verschiedenen Geräten aussieht. Gehen Sie zu den Chrome(Chrome Dev) -Entwicklungstools und auf der Registerkarte Emulation können Sie verschiedene Geräte einreichen. Wählen Sie das gewünschte Gerät aus und testen Sie, wie Ihre Website auf diesem Gerät aussieht.

mobilfreundlich

Weitere Informationen finden Sie im folgenden Video.

9. Sensoren und geografischen Standort emulieren(Geographical Location)

Sie können sogar Sensoren wie Touchscreens und Beschleunigungsmesser emulieren. Sie können sogar den geografischen Standort emulieren. Gehen Sie dazu zu Emulation -> Sensors.

Sensoren emulieren

10. Wählen Sie das nächste Vorkommen des aktuellen Wortes aus

Wenn Sie das Wort in allen seinen Vorkommen ersetzen möchten, wählen Sie das Wort aus und drücken Sie Ctrl + D , um das nächste Vorkommen des ausgewählten Worts auszuwählen. Dann können Sie dieses Wort in allen seinen Vorkommen auf einmal bearbeiten.

Mehrfachauswahl

11. Farbformat ändern

Verwenden Sie einfach Shift + Click auf die Farbvorschau, um zwischen RGB-, Hexadezimal- und HSL-Formatierung zu wechseln.

Farbformat

12. Fügen Sie(Add) über den Arbeitsbereich Änderungen zu lokalen Dateien hinzu

Wir können Quelldateien bearbeiten und einige Änderungen an CSS- , JavaScript- und anderen Dateien in Chrome(Chrome Dev) -Entwicklungstools vornehmen . Um diese Änderungen zu den lokalen Dateien hinzuzufügen, müssen die Änderungen nicht aus dem Arbeitsbereich kopiert und in Dateien auf der Festplatte eingefügt werden. Mit den Chrome(Chrome Dev) -Entwicklungstools können Sie Dateien abgleichen und die lokale Datei mit den Änderungen aktualisieren, die Sie in den Entwicklungstools vorgenommen haben. Klicken Sie dazu mit der rechten Maustaste auf die Quelldatei auf der linken Seite auf der Registerkarte Quellen(Sources ) und wählen Sie Ordner zum Arbeitsbereich hinzufügen.(Add Folder to workspace.)

Hoffe das hilft.



Thorsten Roth

About the author

Ich bin Informatiker mit den Schwerpunkten Datenschutz und Benutzerkonten und Familiensicherheit. Ich habe in den letzten Jahren an der Verbesserung der Smartphone-Sicherheit gearbeitet und habe Erfahrung in der Zusammenarbeit mit Gaming-Unternehmen. Ich habe auch mehrfach über die Probleme im Zusammenhang mit Benutzerkonten und Spielen geschrieben.


Related posts