Verwendung der Chrome-Entwicklertools (plus Typen und Beispiele) • BUOM

25. März 2022

Chrome Developer Tools sind Tools im Chrome-Internetbrowser, mit denen Sie den Code Ihrer Website anpassen und etwaige Änderungen anzeigen können. Die Kenntnis dieser Tools kann Technikexperten dabei helfen, die Qualität ihrer Website-Designs zu verbessern. Indem Sie sich einige gängige Beispiele für Chrome Developer Tools und deren Verwendung ansehen, können Sie feststellen, welche Option Ihnen am besten zum Erfolg in Ihrer Karriere verhilft. In diesem Artikel besprechen wir, was Chrome Developer Tools sind, untersuchen spezifische Aspekte davon und erklären, wie sie für die Webentwicklung verwendet werden können.

Was sind Chrome-Entwicklertools?

Chrome Developer Tools sind eine Reihe von Tools, die im Chrome-Webbrowser vorhanden sind und es Benutzern ermöglichen, den Code einer Website zu bearbeiten, Probleme mit der Benutzeroberfläche zu beheben und ihre ästhetischen Qualitäten zu verbessern. Sie können beispielsweise Skriptfehler entfernen oder die Schriftgröße im Titel erhöhen. Mit diesen Tools können Sie auch die Ergebnisse Ihrer Änderungen sehen, was bedeutet, dass sie besonders für Profis nützlich sein können, die sich auf Website-Funktionalität konzentrieren, wie z. B. Front-End-Entwickler. Damit sind sie auch ein geeignetes Werkzeug zur Erkundung unterschiedlicher Kreativstile, da Sie Ihre Ideen nach der Umsetzung sofort visualisieren können.

Vorteile der Verwendung von Chrome Developer Tools

Einige der Hauptgründe, warum die Verwendung von Chrome Developer Tools eine effektive Möglichkeit zum Bearbeiten einer Website sein kann:

• Es ist schnell und effizient. Entwicklertools sind direkt im Chrome-Browser verfügbar, sodass Sie Websites bearbeiten können, ohne Fenster oder Tabs zu wechseln.

• Dies kann Ihnen helfen, die Funktionalität der Website zu verbessern. Chrome Developer Tools umfasst eine Prüffunktion, die einen Bericht über die Leistung Ihrer Website erstellt – also wie lange es dauert, bis Text, Schaltflächen und Stilelemente geladen werden. Er bietet auch Verbesserungsvorschläge an.

• Es verfügt über ein Debugging-Tool. Sie können Chrome Developer Tools verwenden, um Fehler in Hypertext Markup Language (HTML), Cascading Style Sheets (CSS) oder JavaScript-Codes zu identifizieren, die gängige Programmiersprachen für Online-Plattformen sind. Mithilfe von Tools können Sie die genauen Zeilen identifizieren, die Fehler enthalten, indem Sie die Codeausführung anhalten.

8 Chrome-Entwicklertools

Dies sind die acht Standard-Chrome-Entwicklertools:

1. Elemente

Mit der Chrome Developer Tools-Symbolleiste können Benutzer das Document Object Model (DOM) einer Website auswerten und bearbeiten, eine Schnittstelle, die die Bearbeitung von HTML-Elementen ermöglicht. Außerdem können Benutzer das CSS einer Website mithilfe eines anderen Mechanismus namens CSS Object Model (CSSOM) bearbeiten. Um dieses Tool zu finden, können Sie mit der rechten Maustaste auf ein beliebiges Element der Webseite klicken und die Funktion „Inspizieren“ auswählen. Klicken Sie dann oben rechts auf die Registerkarte „Elemente“. Hier sind einige der Komponenten, die Sie auf der Registerkarte „Elemente“ anpassen können:

• Stile: Sie können durch die Registerkarte „Stile“ scrollen, um den Text auf Ihrer Webseite anzupassen, einschließlich der Verschiebung seiner Ränder und der Änderung der Schriftgröße, des Typs oder der Farbe.

• Seitenlayouts: Wenn Sie auf die Registerkarte „Layout“ klicken, können Sie entsprechend der Browserfenstergröße festlegen, wo Designkomponenten auf der Seite platziert werden sollen.

• Ereignis-Listener. Durch Klicken auf diese Registerkarte können Sie JavaScript-Code anzeigen, mit dem Benutzer Aktionen auf einer Webseite ausführen können, z. B. das Klicken auf Schaltflächen oder das Eingeben von Wörtern in ein Textfeld.

2. Konsole

Das Konsolenfenster hilft Entwicklern, DOM-Fehler zu untersuchen und Probleme mit JavaScript-Code zu beheben. Wenn Sie auf die Registerkarte „Konsole“ klicken, zeigt Ihnen diese Funktion normalerweise die wichtigsten Fehler auf der aktuellen Webseite an. Es enthält außerdem grundlegende Informationen zu diesen Fehlern und Tipps zu deren Behebung. Diese Funktion macht das Konsolenfenster zu einer geeigneten Möglichkeit für Anfänger, das Schreiben effektiven Website-Codes zu üben.

3. Quellen

Das Quellenfenster bietet dem Benutzer Informationen über alle Dateien, die zum Erstellen einer bestimmten Webseite heruntergeladen wurden. Außerdem können Benutzer verwandte Dateien öffnen und anzeigen, was Ihnen beim Bearbeiten oder Debuggen von JavaScript- und CSS-Codes helfen kann. Wenn Sie Codeelemente auf verschiedenen Websites wiederverwenden möchten, können Sie auch die Snippet-Funktion des Quellenbedienfelds verwenden, um bestimmte Zeilen zu speichern.

4. Netzwerk

Network Panel hilft Benutzern, die Website-Leistung zu verbessern, indem es Internetverbindungsprobleme findet und behebt. Dies ist normalerweise nützlich, wenn Sie herausfinden möchten, warum eine Website langsam ist oder nicht reagiert, da alle Netzwerkanfragen aufgezeichnet und in einem detaillierten Protokoll gespeichert werden. Es kann Ihnen auch dabei helfen, Simulationen durchzuführen, um zu sehen, wie eine Webseite auf einem Hardwaresystem geladen wird. Dies kann besonders nützlich sein, wenn Sie versuchen, Inhalte für Computer mit unterschiedlichen Speicher- und Arbeitsspeichermengen zu optimieren.

5. Leistung

Das Leistungs-Dashboard hilft Benutzern, die Website-Leistung zu überwachen und zu überwachen, um die Website-Geschwindigkeit zu verbessern. Schnelle Websites können beispielsweise Designelemente schnell laden und Benutzern die Navigation durch Inhalte mit ihren eigenen Geschwindigkeitspräferenzen ermöglichen. Das Performance-Dashboard analysiert eine Website in Echtzeit und liefert einen detaillierten Bericht über verschiedene Komponenten wie Netzwerkanfragegeschwindigkeit und JavaScript-Funktionen. Sie können den Bericht anpassen, indem Sie auswählen, welche Informationen er enthalten soll.

6. Erinnerung

Die Speicherleiste liefert dem Benutzer Informationen darüber, wie die entsprechende Webseite den Arbeitsspeicher (RAM) des Geräts nutzt, der häufig darüber entscheidet, wie schnell oder langsam eine Website geladen wird. Sein Hauptzweck besteht darin, Ihnen bei der Analyse zu helfen, ob der RAM Ihres Systems Geschwindigkeitsprobleme auf einer Website verursacht.

7. Bewerbung

Das Anwendungs-Dashboard bietet Informationen über die internen Datenbanken und das Speichersystem des Browsers. Auf diese Weise können Sie die Cookies einer Website anzeigen. Hierbei handelt es sich um beliebige Texte, die im Code der Seite gespeichert sind, sodass bestimmte Informationen gespeichert werden. Beispielsweise kann eine Website Cookies verwenden, um Ihren E-Mail-Benutzernamen und Ihr Passwort über mehrere Browsersitzungen hinweg zu speichern. Sie können das Anwendungsfenster aufrufen, um diese gespeicherten Informationen anzuzeigen und anzupassen, wodurch sichergestellt werden kann, dass die Webseite die aktualisierten Daten widerspiegelt.

8. Sicherheit

Der Hauptzweck eines Sicherheits-Dashboards besteht darin, Informationen darüber bereitzustellen, ob eine Website sicher ist, was bedeutet, dass die Informationen des Benutzers vor Datenschutzverletzungen oder ähnlichen Vorkommnissen geschützt sind. Es verwendet verschiedene Farben, um die Sicherheitsstufe einer Website anzuzeigen: Grün zeigt an, dass die Verbindungen sicher sind, Gelb weist auf potenzielle Probleme hin und Rot hebt Probleme hervor, die möglicherweise sofortige Aufmerksamkeit erfordern. Dieses Farbsystem kann Benutzern ohne Cybersicherheitserfahrung häufig dabei helfen, Probleme zu erkennen und unerwünschte Ereignisse zu verhindern.

So verwenden Sie die Chrome-Entwicklertools

Befolgen Sie diese Schritte, um die Chrome Developer Tools erfolgreich zu verwenden:

1. Erwerben Sie Grundkenntnisse in HTML, CSS und JavaScript

Um die Chrome-Entwicklertools effektiv zu nutzen, lernen Sie die Grundlagen von HTML, CSS und JavaScript. Obwohl einige Entwicklertools für Anfänger und unerfahrene Benutzer verfügbar sind, können Sie mit Grundkenntnissen dieser Sprachen ihre Fähigkeiten voll ausschöpfen. Um diese Programmiersprachen zu erlernen, suchen Sie online nach Open-Source-Tutorials, da diese Ressourcen möglicherweise eine vereinfachte Sprache enthalten, die Ihnen beim Verständnis der Grundkonzepte helfen kann. Sie können auch Foren zur Website-Entwicklung durchsuchen und Online-Experten spezifische Fragen zu Chrome Developer Tools stellen.

2. Öffnen Sie das Fenster „Chrome Developer Tools“.

Sie können auf alle Entwicklertools von Chrome zugreifen, indem Sie ein spezielles Fenster öffnen. Klicken Sie dazu mit der rechten Maustaste auf eine beliebige Stelle auf der Seite, die Sie entwerfen möchten, und wählen Sie „Inspizieren“ aus. Alternativ können Sie die Tasten Strg, Umschalt und C gleichzeitig drücken, um eine Verknüpfung in Windows zu öffnen. Wenn Sie ein Mac®-Produkt verwenden, können Sie stattdessen die Tasten „Befehl“, „Wahl“ und „C“ drücken, um die Entwicklertools zu öffnen. Danach erscheint die Navigationsleiste normalerweise auf der rechten Seite des Browserfensters.

3. Klicken Sie auf eine Registerkarte, um auf deren Funktionen zuzugreifen.

Wenn Sie die Registerkarte „Entwicklertools“ öffnen, können Sie oben auf dem Browserbildschirm auf alle acht Entwicklertools zugreifen. Wählen Sie aus, welche Website-Komponente Sie bearbeiten oder analysieren möchten. Wenn beispielsweise eine Seite nach dem Klicken auf die zugehörige Schaltfläche nicht geöffnet wird, kann es hilfreich sein, einen Blick auf den Abschnitt „Ereignis-Listener“ der Registerkarte „Elemente“ zu werfen. Wenn Sie Bedenken hinsichtlich der Geschwindigkeit Ihrer Website haben, können Sie auf den Registerkarten „Leistung“ oder „Speicher“ automatisierte Berichte sowie Vorschläge für mögliche Verbesserungen abrufen. Sie können die Funktionalität Ihrer Website auch auf einem mobilen Gerät testen, indem Sie oben auf dem Bildschirm „Gerätesymbolleiste umschalten“ auswählen.

4. Bearbeiten Sie die Website-Komponente

Nutzen Sie Ihre Kenntnisse in HTML, CSS oder JavaScript, um mit dem Chrome Developer Tool eine Textzeile oder ein Skript auf Ihrer Website zu bearbeiten. Diese Änderungen erscheinen in der Regel gleichzeitig auf der Webseite, sodass Sie Ihre Bemühungen in Echtzeit bewerten können. Wenn Sie ein unerwartetes Ergebnis erhalten, sollten Sie die Website eines Technologieforums nach der Antwort durchsuchen. Sie können sich bei einem konkreten Problem mit Ihren Entwicklertools auch an einen Experten wenden, da dieser möglicherweise eine klare Vorstellung von möglichen Lösungen hat.

Bitte beachten Sie, dass keine der in diesem Artikel genannten Organisationen mit Indeed verbunden ist.