Tutorials, Tipps, Tricks zu den Chrome-Entwicklungstools

Google Chrome ist aufgrund seiner erweiterten Funktionen einer der beliebtesten Webbrowser für die Webentwicklung. Chrome-Entwicklertools(Chrome Developer Tools) kann beim Debuggen sehr hilfreich sein. Die meisten von uns wissen bereits, dass wir live schneiden können css mit Hilfe Chrome-Entwicklungstools aber es gibt noch andere Tipps, die wir heute mit Ihnen teilen werden.

Tipps für Chrome-Entwicklungstools

In den Chrome-DevTools(Chrome Dev Tools) gibt es viele unbekannte und versteckte Tricks, und wir werden uns die nützlichsten darunter ansehen. Zum Öffnen von Entwicklertools in Chrom klicken F12 auf der Tastatur und versuchen Sie die folgenden Tricks.

1. Suchen und öffnen Sie eine beliebige Datei

Wenn wir Webentwicklung betreiben, haben wir es mit vielen zu tun HTML , css , js und andere Dateien. Wenn wir etwas debuggen wollen, öffnen wir die Tools Chrome-Entwickler Sie können die gewünschte Datei schnell suchen und finden, um Ihre Arbeit zu erleichtern. Gerade(Klick einfach Strg+S und beginnen Sie mit der Eingabe des Dateinamens. Dies hilft Ihnen, eine 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 heruntergeladenen Dateien nach einer bestimmten Zeichenfolge suchen. Klicken Strg+Umschalt+F um eine Zeichenfolge in Dateien zu finden. Es unterstützt auch reguläre Ausdrücke.

Suche in Dateien

3. Zu einer bestimmten Zeile springen

Wenn Sie eine beliebige Quelldatei geöffnet haben und zu einer bestimmten Zeile springen möchten, drücken Sie Strg+G geben Sie die Zeilennummer ein und drücken Sie die Eingabetaste.

Gehen Sie zur Zeile

4. Auswahl von DOM-Elementen im Reiter ” Konsole »(Konsole)

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

  • $() – kehrt zurück(Gibt) das erste Vorkommen des übereinstimmenden Selektors zurück css.
  • $$() – gibt ein Array von Elementen zurück, die dem angegebenen Selektor entsprechen css.

Auswählen von DOM-Elementen

Um mehr über Konsolenbefehle zu erfahren, gehen Sie zu diesem Beitrag. (dieser Beitrag.)

5. Verwenden Sie mehrere Schlitten

Manchmal möchten Sie mehrere Carets an verschiedenen Stellen installieren, und Sie können dies ganz einfach in den Tools tun Chrome-Entwickler halten Strg-Taste(Strg ) und klicken Sie auf die Stelle, an der Sie sie platzieren möchten. Beginnen Sie dann mit dem Schreiben und Sie sehen, was an den verschiedenen ausgewählten Stellen platziert ist.

Verwenden Sie mehrere Wagen

6. Protokoll speichern

Speichern(Preserve) log hilft, das Protokoll zu behalten, selbst wenn die Seite geladen wird. Aktivieren Sie das Kontrollkästchen neben ” Protokoll speichern”(Protokoll beibehalten) im Protokoll Konsolen(Konsole) und das Protokoll wird gespeichert. Dies zeigt das Protokoll, bevor die Seite entladen wird, und hilft, Fehler zu untersuchen.

Protokoll speichern

7. Verwenden Sie den integrierten Code-Editor

In den Chrome-DevTools(Chrome Dev Tools) verfügt über ein integriertes Codeverbesserungstool namens schönes Siegel “{}”(schön gedrucktes „{}“) . Das Entwicklertool zeigt verkleinerten Code und ist nicht so einfach zu lesen. Klicken(Klicken) Sie auf die hübsche Druckschaltfläche, die in der linken unteren Ecke einer Open-Source-Datei erscheint, um die Quelldatei in einem für Menschen lesbaren Format anzuzeigen.

schöner Druckknopf

8. Ist Ihre Website für Mobilgeräte optimiert? Schau es dir hier an

Chrome-Entwicklungstools ermöglicht es uns auch zu ü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 Werkzeugen chrome dev und in tab (Chrome-Entwickler)“Emulation(Emulation) » Sie können verschiedene Geräte registrieren. Wählen Sie das gewünschte Gerät aus und prüfen Sie, wie Ihre Website auf diesem Gerät aussieht.

mobilfreundlich

Weitere Informationen finden Sie im folgenden Video.

9. Sensoren emulieren und geographische Lage(Geografische Position)

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

Sensoren emulieren

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

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

Mehrfachauswahl

11. Farbformat ändern

Benutz einfach Umschalt+Klick in der Farbvorschau, um die Formatierung zwischen rgba, hex-Formatierung und hsl zu ändern.

Farbformat

12. Hinzufügen(Hinzufügen) von Änderungen an lokalen Dateien über den Arbeitsbereich

Wir können Quelldateien bearbeiten und einige Änderungen daran vornehmen css , JavaScript und andere Dateien in Tools Chrome-Entwickler Um diese Änderungen zu lokalen Dateien hinzuzufügen, ist es nicht erforderlich, Änderungen aus dem Arbeitsbereich in die Dateien auf der Festplatte zu kopieren und einzufügen. Chrome-Entwicklungstools(Chrome Dev) ermöglicht es Ihnen, Dateien abzugleichen und Ihre lokale Datei mit den Änderungen zu aktualisieren, die Sie an den Entwicklertools vorgenommen haben. Klicken Sie dazu mit der rechten Maustaste auf die Quelldatei links im ” Quellen(Quellen)” und wählen Sie ” Ordner zum Arbeitsbereich hinzufügen.(Ordner zum Arbeitsbereich hinzufügen.)

Hoffe das hilft.

Google Chrome ist aufgrund seiner erweiterten Funktionen einer der beliebtesten Webbrowser für die Webentwicklung. Chrome-Entwicklertools kann 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 möchten, öffnen wir die Chrome Dev Tools. Sie können die bestimmte Datei schnell suchen und finden, um Ihre Arbeit zu erleichtern. Einfach drücken Strg+S 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 Sie Strg+Umschalt+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

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

Gehen Sie zur Zeile

4. Auswahl von DOM-Elementen auf der Registerkarte Konsole

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

  • $() – Gibt 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.

5. Verwenden Sie mehrere Caretzeichen

Manchmal möchten Sie mehrere Caretzeichen an verschiedenen Stellen setzen, und Sie können dies in den Chrome-Entwicklungstools ganz einfach tun, indem Sie die gedrückt halten Strg Taste und klicken Sie auf die Stelle, 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.

Nutzen Sie mehrere Pflegen

6. Protokoll beibehalten

Protokoll beibehalten hilft Ihnen, das Protokoll beizubehalten, selbst wenn die Seite geladen wird. Aktivieren Sie die nebenstehende Option Protokoll aufbewahren im Konsolenprotokoll 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 hat den integrierten Code-Beautifier namens schöner Druck “{}”. Das Entwicklertool zeigt den minimierten Code und ist nicht so einfach zu lesen. Klicken Sie 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 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-Entwicklungstools und darunter Emulation Registerkarte können Sie verschiedene Geräte ablegen. 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

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

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 Strg+D , um das nächste Vorkommen des ausgewählten Wortes auszuwählen. Dann können Sie dieses Wort in allen seinen Vorkommen auf einmal bearbeiten.

Mehrfachauswahl

11. Farbformat ändern

Benutz einfach Umschalt+Klick in der farbvorschau ändert sich zwischen rgba-, hexadezimal- und hsl-formatierung.

Farbformat

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

Wir sind in der Lage, Quelldateien zu bearbeiten und einige Änderungen an CSS, JavaScript und anderen Dateien in Chrome-Entwicklungstools vorzunehmen. Um diese Änderungen zu den lokalen Dateien hinzuzufügen, müssen die Änderungen nicht aus dem Arbeitsbereich in Dateien auf der Festplatte kopiert und eingefügt werden. Mit den Chrome-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 der Quellen antippen und auswählen Ordner zum Arbeitsbereich hinzufügen.

Hoffe das hilft.