Home-theater-designers
Chrome DevTools ist ein wesentlicher Vorteil für Entwickler. Während andere Browser ziemlich praktische Tools zur Fehlerbehebung bieten, ist Chrome DevTools aufgrund seiner multifunktionalen Benutzeroberfläche und Popularität Ihre Aufmerksamkeit wert.
Chrome ist aufgrund seiner leistungsstarken Suite von Debugging-Tools der beliebteste Browser für Entwickler. Die Verwendung von Chrome DevTools ist einfach, aber Sie müssen verstehen, wie es funktioniert, um das Beste daraus zu machen.
So funktionieren die Chrome-Entwicklertools
Mit Chrome DevTools können Sie Probleme auf einer Website über die Fehlerkonsole und andere Debugging- und Überwachungstools lösen. Die Verwendung von DevTools deckt Frontend-Lücken auf und ermöglicht es Ihnen, zu überwachen, wie Ihre Website auf mobilen und Tablet-Geräten angezeigt wird.
Mit DevTools können Sie den Code einer Website in Echtzeit bearbeiten, z. B. JavaScript, HTML und CSS, und erhalten sofortige Ergebnisse Ihrer Änderungen.
Die Änderungen, die Sie über die DevTools vornehmen, wirken sich nicht dauerhaft auf die Website aus. Sie zeigen nur vorübergehend das erwartete Ergebnis an, als ob Sie sie auf den tatsächlichen Quellcode angewendet hätten. Auf diese Weise können Sie Wege finden, um Ihre Website viel schneller zu laden und Fehler zu beheben.
So greifen Sie auf Chrome DevTools zu
Sie können auf verschiedene Arten auf Chrome DevTools zugreifen. Um die Entwicklertools mit der Verknüpfungsmethode unter Mac OS zu öffnen, drücken Sie Befehl + Opt + I . Wenn Sie das Windows-Betriebssystem verwenden, klicken Sie auf Strg + Umschalt + I Tasten auf Ihrer Tastatur.
Alternativ können Sie auf die Chrome-Entwicklertools zugreifen, indem Sie auf die drei Punkte in der oberen rechten Ecke des Bildschirms klicken. Gehen Sie zu Mehr Werkzeuge und wählen Sie Entwicklerwerkzeuge . Eine andere Möglichkeit besteht darin, mit der rechten Maustaste auf die Webseite zu klicken und auf das Prüfen Möglichkeit.
Verwenden der Chrome-Entwicklertools für die Website-Diagnose
Chrome DevTools bieten mehrere Möglichkeiten, eine Webseite zu optimieren und Fehler zu beheben. Sehen wir uns einige Möglichkeiten an, wie DevTools Ihnen helfen kann.
Sehen Sie, wie Ihre Website auf einem Smartphone aussieht
Sobald Sie Ihren Chrome-Browser in den Entwicklermodus wechseln, rendert er eine halbgroße Version Ihrer Webseite. Dies gibt Ihnen jedoch keinen wirklichen Überblick darüber, wie es auf einem Smartphone oder Tablet aussehen würde.
Glücklicherweise können Sie mit Chrome DevTools nicht nur die Bildschirmgröße einer Webseite einstellen, sondern auch zwischen verschiedenen mobilen Bildschirmtypen und -versionen wechseln.
Um auf diese Option zuzugreifen, schalten Sie das Prüfen Modus. Klicken Sie anschließend auf das Responsiv Dropdown in der oberen linken Ecke der DevTools und wählen Sie Ihr bevorzugtes Mobilgerät aus. Die Webseite wird dann gerendert und an die Größe des ausgewählten Mobilgeräts angepasst.
Netflix kann diesen Titel momentan nicht abspielen
Auf die Quelldateien einer Webseite zugreifen
Sie können über Chrome DevTools auf die Dateien zugreifen, aus denen eine Webseite besteht. Um auf diese Dateien zuzugreifen, klicken Sie auf das Quellen Option im oberen Teil des DevTools-Menüs. Dadurch wird das Dateisystem der Website freigelegt und Sie können auch bearbeiten.
Sie können auch nach Quelldateien suchen, was bei einer Webseite mit vielen Ressourcen hilfreich sein kann. Um über DevTools nach einer Quelldatei zu suchen, klicken Sie auf das Suche Option direkt über der Konsole.
Wenn Sie die jedoch nicht finden können Suche Option ist eine bessere Alternative die Verwendung von Tastenkombinationen. Drücken Sie unter Mac OS die Befehl + Opt + F Tasten, um nach einer Quelldatei zu suchen. Wenn Sie ein Windows-Betriebssystem verwenden, drücken Sie die Strg + Umschalt + F , um auf die Suchleiste der Quelldatei zuzugreifen.
Ausführen von Live-Bearbeitungen an einer Webseite
Einer der Hauptzwecke der Verwendung der DevTools ist die Durchführung einer sofortige gefälschte Bearbeitung der Elemente auf einer Webseite . Sobald Sie zu den Entwicklertools wechseln, können Sie den HTML-Inhalt einer Website bearbeiten, indem Sie auf das Elemente Möglichkeit. Klicken Sie dann im Code-Editor mit der rechten Maustaste auf einen beliebigen Punkt, an dem Sie Änderungen vornehmen möchten, und wählen Sie Als HTML bearbeiten .
Um CSS-Eigenschaften zu bearbeiten, die nicht inline sind, wählen Sie Quellen . Wählen Sie als Nächstes die CSS-Datei aus, die Sie bearbeiten möchten. Platzieren Sie den Cursor auf der gewünschten Zeile in der Codekonsole, um eine Live-Bearbeitung durchzuführen. Auf diese Weise erhalten Sie sofortiges Feedback zu allen Stiländerungen, die Sie auf die Webseite anwenden.
Beachten Sie, dass, wenn Sie eine Seite über die DevTools bearbeiten, ein erneutes Laden der Seite in Ihrem Browser sie in ihre ursprüngliche Form zurückversetzt und die Bearbeitung nur für Sie sichtbar ist. Die Bearbeitung über DevTools beeinträchtigt weder den reibungslosen Betrieb noch die Nutzung dieser Website für andere Nutzer.
Debuggen Sie JavaScript-Code mit der DevTools-Konsole
Eine der besten Möglichkeiten zum Debuggen von JavaScript ist die Verwendung der Entwicklertools von Chrome. Es gibt Ihnen einen direkten Bericht über ungültige Skripte sowie den genauen Ort des Fehlers.
Es hat sich bewährt, DevTools beim Entwerfen einer Website mit JavaScript immer geöffnet zu lassen. Zum Beispiel das Ausführen der Konsole.log() Befehl von JavaScript auf eine Reihe von Anweisungen zeigt das Ergebnis dieses Protokolls in der DevTools-Konsole an, wenn das Programm erfolgreich ausgeführt wird.
Standardmäßig meldet die Konsole alle JavaScript-Probleme auf Ihrer Website. Sie finden die Konsole im unteren Bereich der DevTools oder greifen darauf zu, indem Sie auf das klicken Konsole Option oben im Chrome DevTools-Fenster.
Überwachen des Ladens von Ressourcen aus einer Datenbank
Zusätzlich zum Debuggen von JavaScript kann die Konsole Ihnen auch Details zu Ressourcen anzeigen, die nicht korrekt aus der Datenbank der Website geladen werden.
Dies ist zwar nicht immer der beste Weg, um Backend-Probleme zu beheben, aber es zeigt Ihnen dennoch an, welche Ressourcen zurückgegeben werden 404 Fehler nach dem Ausführen einer Datenbankabfrage dieser Elemente.
Verwandte: Häufige Website-Fehler und ihre Bedeutung
Ändern Sie die Ausrichtung der Chrome-Entwicklertools
Um die Position der Chrome-Entwicklertools zu ändern, klicken Sie auf die drei Menüpunkte in den DevTools (nicht den Hauptpunkt im Browser). Wählen Sie dann Ihre bevorzugte Position aus dem Dockseite Möglichkeit.
Chrome DevTools-Erweiterungen installieren
Sie können auch sprach- oder Framework-spezifische Erweiterungen installieren, die mit Chrome DevTools funktionieren. Durch die Installation dieser Erweiterungen können Sie Ihre Webseite effizienter debuggen.
Sie können auf eine Liste der verfügbaren Erweiterungen für Chrome DevTools in Chrome zugreifen Empfohlene DevTools-Erweiterungen Galerie.
Auf Sicherheitsprobleme auf einer Website prüfen
Mit Chrome DevTools können Sie anhand von Parametern wie der Verfügbarkeit von . beurteilen, wie sicher Ihre Website ist Websicherheitszertifikate und wie sicher die Verbindung ist, unter anderem. Um zu überprüfen, ob Ihre Website sicher ist, klicken Sie auf das Sicherheit Option oben in den DevTools.
Die Sicherheit Registerkarte gibt Ihnen einen Überblick über die Sicherheitsdetails Ihrer Website und informiert Sie über potenzielle Bedrohungen.
Überprüfen Sie Ihre Website
Chrome DevTools verfügt über eine Funktion, mit der Sie die Gesamtleistung Ihrer Website anhand bestimmter Parameter überprüfen können.
Um auf diese Funktion zuzugreifen, wählen Sie die Leuchtturm Option oben im DevTools-Fenster. Wählen Sie als Nächstes die Parameter aus, die Sie überprüfen möchten, und kreuzen Sie dann entweder das Handy, Mobiltelefon oder Desktop Optionen, um zu sehen, wie Ihre Webseite auf verschiedenen Plattformen funktioniert.
Klicken Sie anschließend auf Bericht generieren um eine Analyse Ihrer Webseite basierend auf den zuvor ausgewählten Parametern durchzuführen.
Sie können die Laufzeit oder die Ladeleistung einer Website auch beurteilen, indem Sie auf das Leistung Möglichkeit. Um einen Test durchzuführen, klicken Sie auf das Symbol neben dem Klicken Sie auf die Aufnahmeschaltfläche Möglichkeit, eine Laufzeitanalyse durchzuführen. Alternativ können Sie auch auf die darunter liegende Schaltfläche zum erneuten Laden klicken, um die Ladezeitleistung zu bewerten. Klicke auf Halt um den Analysator zu stoppen und die Ergebnisse anzuzeigen.
Nutzen Sie die Chrome DevTools
Je nachdem, wofür Sie es benötigen, können Sie mit Chrome DevTools mehr tun als nur einfaches Website-Debugging. Glücklicherweise sind DevTools für Programmierer aller Erfahrungsstufen einfach zu bedienen. Sie können sogar einige Grundlagen der Website-Frontend-Entwicklung lernen, indem Sie den Quellcode der von Ihnen besuchten Websites nachschlagen.
Wie man Ghost Touch auf dem iPhone repariert
Möglicherweise entdecken Sie auch einige andere Optionen, die wir in diesem Artikel nicht besprochen haben. Zögern Sie also nicht, mit den verfügbaren Funktionen herumzuspielen. Außerdem schadet das Optimieren dieser Funktionen einer Website kein bisschen.
Teilen Teilen Tweet Email So verwenden Sie Chrome OS auf einem Raspberry PiSie können sich ein Chromebook nicht leisten? Auf der Suche nach einer Alternative zu Raspbian? So installieren Sie eine Version von Chrome OS auf Ihrem Raspberry Pi.
Weiter lesen Verwandte Themen- Internet
- Programmierung
- HTML
- Web Entwicklung
- JavaScript
- Google Chrome
Idowu hat eine Leidenschaft für intelligente Technologien und Produktivität. In seiner Freizeit spielt er mit Programmieren und wechselt bei Langeweile aufs Schachbrett, aber er liebt es auch, ab und zu aus der Routine auszubrechen. Seine Leidenschaft, Menschen den Weg in die moderne Technik zu weisen, motiviert ihn, mehr zu schreiben.
Mehr von Idowu OmisolaAbonniere unseren Newsletter
Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!
Klicken Sie hier, um zu abonnieren