Chrome-Entwicklungstools Lernprogramme, Tipps, Tricks

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

Tipps zu Chrome-Entwicklungstools

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

1. Finde und öffne jede Datei

Wenn wir Web-Entwicklung machen, beschäftigen wir uns mit vielen HTML, CSS, JS und anderen Dateien. Wenn wir etwas debuggen möchten, öffnen wir die Chrome Dev-Tools. Sie können die bestimmte Datei schnell suchen und finden, um Ihre Arbeit zu erleichtern. Drücken Sie einfach Strg + P und geben Sie den Dateinamen ein. Dies hilft Ihnen, die bestimmte Datei aus der Liste der Dateien zu finden.

2. Suche in der Quelldatei

Im vorherigen Trick haben wir erfahren, 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 nach einer Zeichenfolge in Dateien zu suchen. Es unterstützt auch reguläre Ausdrücke.

3. Gehen Sie zu einer bestimmten Zeile

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

4. Wenn Sie auf der Registerkarte Konsole

DOM-Elemente auswählen, können Sie auch Elemente in der Konsole auswählen.

• $ () - Gibt das erste Vorkommen des passenden CSS-Selektors zurück.
• $$ () - Es gibt das Array der Elemente zurück, die mit dem angegebenen CSS-Selektor übereinstimmen.

Weitere Konsolenbefehle finden Sie in diesem Beitrag.

5. Verwenden Sie mehrere Caretzeiten

Manchmal möchten Sie mehrere Caries an verschiedenen Orten einstellen und dies können Sie einfach in den Chrome Dev-Tools tun, indem Sie die Taste Strg gedrückt halten und auf die Stelle klicken, an der Sie sie platzieren möchten. Dann fange an zu schreiben und du wirst sehen, dass es an verschiedenen ausgewählten Orten platziert ist.

6. Protokoll beibehalten

Protokoll beibehalten hilft Ihnen, das Protokoll beizubehalten, selbst wenn die Seite geladen ist. Aktivieren Sie die Option neben Protokoll beibehalten im Konsolenprotokoll und das Protokoll wird beibehalten. Dies zeigt das Protokoll vor der Seite in unloaded und hilfreich, um die Fehler zu untersuchen.

7. Verwenden Sie den integrierten Code-Beautifier

Chrome Dev Tools hat den integrierten Code-Beautifier namens pretty print "{}". Das Developer Tool zeigt den minimierten Code an und ist nicht so einfach zu lesen. Klicken Sie auf die hübsche Druckschaltfläche, die links unten in der geöffneten Quelldatei angezeigt wird, um die Quelldatei im vom Menschen lesbaren Format anzuzeigen.

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

Mit Chrome Dev Tools können Sie auch prüfen, ob eine Website für Mobilgeräte geeignet ist oder nicht. Sie können überprüfen, wie Ihre Website auf verschiedenen Geräten aussieht. Wechseln Sie zu den Chrome Dev-Tools, und auf der Registerkarte Emulation können Sie verschiedene Geräte speichern. Wählen Sie das gewünschte Gerät und testen Sie, wie Ihre Website in diesem Gerät aussieht.

Weitere Informationen finden Sie im folgenden Video.

9. Sensoren emulieren und geographische Lage

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

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

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

11. Alter Color Format

Verwenden Sie einfach Shift + Click in der Farbvorschau, um zwischen den Formaten rgba, hexadezimal und hsl zu wechseln.

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

hinzuWir können Quelldateien bearbeiten und einige Änderungen in CSS, Java Script und anderen Dateien in Chrome Dev-Tools vornehmen. Um diese Änderungen zu den lokalen Dateien hinzuzufügen, müssen Sie die Änderungen nicht kopieren, indem Sie sie vom Arbeitsbereich in Dateien auf der Festplatte einfügen. Mit den Chrome-Entwicklungstools können Sie Dateien abgleichen und die lokale Datei mit den Änderungen aktualisieren, die Sie in den Entwicklungstools vorgenommen haben. Um dies zu tun, klicken Sie mit der rechten Maustaste auf die Quelldatei auf der linken Seite auf der Registerkarte Quellen und wählen Sie Ordner zum Arbeitsbereich hinzufügen

Weitere Informationen zu Arbeitsbereichen finden Sie unter Chrome.com.