Wofür sind Chrome DevTools?

Chrome DevTools ist ein In Google Chrome integrierte Tools zum Erstellen und Debuggen von Websites. Natürlich können wir sie auch verwenden in seiner Open-Source-Version; Chrom.

Sie können auf die Chrome-Tools für Entwickler zugreifen, indem Sie die Tastenkombination Strg + Umschalt + I drücken, den Mauszeiger über ein Element bewegen und mit der rechten Maustaste auf Inspizieren klicken.

Componentes

Wenn wir Chrome DevTools öffnen, sehen wir, dass u angezeigt wirdn Bereich rechts neben der Seite, die wir durchsuchen. Dieses Panel seinerseits eEs ist in Registerkarten unterteilt, die den einzelnen Werkzeugen entsprechen. Die Werkzeuge sind wiederum in Abschnitte unterteilt.
Die Abschnitte sind:

• Elemente: Zeigt die verschiedenen Komponenten der Seite an.
• Konsole: Ermöglicht die Ausführung von Diagnosen während der Entwicklung oder die Interaktion mit dem Javascript-Code wie mit dem Linux-Terminal.
• Quellen: Erleichtert das Debuggen von Javascript-Code und das Arbeiten mit lokalen Dateien.
• Netzwerk: Hilft bei der Überwachung und Verbesserung der Seitenleistung.
• Zeitleiste: Ermöglicht die Aufzeichnung und Erkundung der verschiedenen Ereignisse, die während des Besuchs einer Site auftreten.
• Anwendung: Untersucht alle geladenen Ressourcen. unter anderem IndexedDB- oder Web SQL-Datenbanken, lokaler Speicher und Sitzungsspeicher, Cookies, App-Cache, Bilder, Schriftarten und Stylesheets.
• Sicherheit: Erkennt Sicherheitsprobleme im Code.

Mal sehen, wofür wir Chrome DevTools verwenden können

Beheben Sie, was nicht funktioniert

Es ist jedem Entwickler passiert. Schreiben Sie den Code, stellen Sie sicher, dass keine Fehler vorliegen, und dennoch funktioniert die Seite im Moment der Wahrheit nicht so, wie sie sollte. Das Konsolentool zeigt an, welcher Fehler zur Ausführungszeit auftritt.

Ladezeit verringern

Wenn das Laden einer Seite lange dauert, wird der Benutzer müde und wechselt zu einer anderen Site. Glücklicherweise ist die Ära der Flash-Websites und ihrer animierten Intros vorbei. Auf jeden Fall die Registerkarte "Netzwerke" der Chrome DevTools erleichtert das Erkennen, welche Elemente die Last verzögern. Wir können den Test für verschiedene Verbindungsgeschwindigkeiten wiederholen.

Ändern Sie den Code

Auf der Registerkarte Elemente können wir Siehe die Elemente einer Seite, den zugehörigen HTML-Code und die CSS-Eigenschaften. Wir können sie auch ändern.

Wir können den Text einer Seite mit dem Befehl bearbeiten

document.designMode = 'on';

Probieren Sie verschiedene Bildschirmgrößen aus

Tablets, Smartphones, Smart-TVs, Desktop-Computer. Die Liste der Geräte, mit denen wir im Internet surfen, wächst. Mit Chrome DevTools können wir Testen Sie, ob eine Seite in verschiedenen Größen gut aussieht.

Benchmarking

Im Management bedeutet der Begriff Benchmarking, aus den Best Practices derer zu lernen, die das Gleiche tun wie wir. Wenn wir mit Chrome DevTolls das Design einer Website mögen, können wir das Sehen Sie sich den HTML-Code und die CSS-Stylesheets an und kopieren Sie sie auf unsere Website.

Chrome DevTools herunterladen

Chrome DevTools ist in den Browsern Google Chrome und Chromium verfügbar. Chrom befindet sich in den Repositories der Hauptdistributionen. Es kann auch in Geschäften installiert werden Schnappen. Wie für Google Chrome können Sie Komm her. im DEB- und RPM-Format