Warum Sie jetzt mit der Verwendung der Chrome-Entwicklertools beginnen sollten

Für Entwickler ist es wichtig, eine Reihe praktischer Tools zum Testen Ihrer Website zu haben. Wo bewahrt man sie am besten auf? Natürlich in Ihrem Browser! Der beliebte Webbrowser von Google, Chrome, verfügt über integrierte Entwicklertools. Es handelt sich um eine Reihe von Tools für die Webdokumenterstellung und das Debugging. Die Chrome Developer Tools (bekannt als DevTools) geben Entwicklern Zugriff auf die interne Funktionsweise des Webbrowsers und der Web-Apps.

Mit Chrome DevTools können Sie die verwendeten Stile, die Größe der Bilder, die verwendeten Skripte usw. kennen. Sie können Fehler beheben und wissen, welche Fehler auf der Seite vorhanden sind. Sie können Stile sogar ein- oder ausschalten oder sie vollständig ändern, um zu sehen, welche Auswirkungen sie auf Ihre Website haben.

Es ist in Ihrem Browser

Die Werkzeuge selbst sind leicht zu erreichen. Es gibt drei Möglichkeiten, sie zu öffnen:

1. Wählen Sie in Ihrem Chrome-Browser das Chrome-Menü (die drei horizontalen Balken in der oberen rechten Ecke), wählen Sie Weitere Tools und dann Entwicklertools aus.
2. Klicken Sie mit der rechten Maustaste auf ein Element auf einer beliebigen Seite und wählen Sie Element prüfen.
3. Wählen Sie auf Ihrer Tastatur in Windows Strg + Umschalt + i. Wählen Sie auf dem Mac cmnd + opt + i.

Jeder von ihnen öffnet das DevTools-Fenster am unteren Rand Ihres Browsers.

Primäres Fenster

Die Werkzeuge werden am unteren Bildschirmrand angezeigt. Sie sehen ein primäres Fenster mit Menüs im oberen Bereich und Elementen als Standardansicht und ein sekundäres Fenster mit Menüs und Stilen als Standardauswahl.

Die Werkzeuge sind in Aufgaben gruppiert. Es gibt 8 Gruppen, die Elemente, Netzwerk, Quellen, Zeitachse, Profile, Ressourcen, Audits und Konsole umfassen.

Elemente

Hier sehen Sie die HTML-Struktur Ihrer Seite. Unten befindet sich ein Umschalter für HTML und Body. Sie können mit der Maus über jedes der Elemente fahren, um detaillierte Informationen zu jedem einzelnen anzuzeigen.

Sie können auf die Pfeile klicken, um den Inhalt der Hauptelemente zu öffnen und zu schließen, um sie leichter lesbar zu machen. Sie können also den Hauptteil schließen und einfach die Kopfzeile lesen, Elemente innerhalb der Kopfzeile auswählen, um sie anzuzeigen usw. Dies ist ein hervorragendes Werkzeug zum Anzeigen des HTML-Codes Ihrer Website.

Netzwerk

Dies zeigt jedes Element, das geladen wird, wie es geladen wird, den Dateityp, die Größe der Datei, die Ladezeit und eine Zeitleiste, wann es innerhalb der Seitenladesequenz geladen wird. Dies kann verwendet werden, um Netzwerkprobleme wie Engpässe beim Laden von Seiten und fehlerhafte Anforderungen zu beheben.

Wenn Sie beispielsweise viele 404-Fehler sehen, können Sie genauer hinschauen, um die Probleme zu erkennen. Vielleicht haben Sie eine Seite heruntergefahren, die immer noch viel Verkehr hat, oder vielleicht hat jemand einen Link falsch eingegeben.

Quellen

Dies zeigt die Skripte und Snippets, die geladen werden und woher sie kommen.

Zeitleiste

Dies zeigt Ihnen die Zeit an, die jede Ressource zum Laden benötigt. Sie können sehen, was die meiste Zeit in Anspruch nimmt, was dazu beiträgt, das Laden von Seiten zu reduzieren.

Profile

Dies zeigt die Speichernutzung jedes Elements. Dies ist großartig, um Ihnen zu zeigen, welcher Code optimiert werden muss.

Ressourcen

Hier können Sie die geladenen Ressourcen überprüfen. Sie können sich Cookies, Anwendungscache, HTML5-Datenbanken usw. ansehen.

Prüfungen

Auf diese Weise können Sie die Seite analysieren. Sie können nach dem Laden oder während des Ladens prüfen.

Aktuellen Status prüfen

Zuerst habe ich ausgewählt, Audit Present State auszuführen. Dies führt das Audit so aus, wie die Site derzeit sitzt und bereits in meinen Browser geladen ist.

Es gibt mir eine Liste von Elementen, färbt sie nach ihrer Wichtigkeit und zeigt die Anzahl der Probleme an. Ich kann mehr Details sehen, indem ich darauf klicke.

Ich habe mehrere von ihnen erweitert, um die detaillierten Informationen zu jedem anzuzeigen. Es gibt mir Informationen über die Netzwerkauslastung und die Webseitenleistung. Es gibt mir Tipps zur Behebung der Probleme und priorisiert sie für mich.

Lade die Seite neu und prüfe sie währenddessen

Ich ging zurück und wählte Audit on Load aus. Die Ergebnisse sind ähnlich, aber wie erwartet treten beim Laden der Seite mehr Probleme auf als nach dem Laden der Seite.

Zwischen den beiden erhalte ich Informationen über JavaScript, Browser-Caching, Proxy-Caching, Cookie-Größe, Bereitstellen von Inhalten von einer cookielosen Domain, Bildabmessungen, Reihenfolge und Stile von Skripten, Platzieren von CSS im Dokumentkopf, Entfernen nicht verwendeter CSS-Riles und Verwendung von normalem CSS Eigenschaftsnamen. Natürlich variieren die Ergebnisse je nach Standort.

Die Informationen sind nicht so detailliert wie bei PageSpeed ​​Insights, aber sie reichen für den Anfang aus und ich mag die Bequemlichkeit, dass sie in das Tool integriert ist, das ich sowieso verwende. Ich empfehle, es jedes Mal auszuführen, wenn Sie eine Änderung an Ihrer Website vornehmen. Es ist zu einfach zu verwenden, um es nicht zu verwenden.

Konsole

Dies ist die JavaScript-Konsole, in der Sie Seiten und Apps testen können. Sie können Ihre Skripte debuggen und Ratschläge zu den vorzunehmenden Änderungen erhalten. In der Konsole können Sie Befehle eingeben, damit Sie mit Ihrer Webseite interagieren können. Es protokolliert die Diagnoseinformationen, um Ihnen beim Debuggen zu helfen. Sie können es im Hauptbildschirm oder in der Schublade (dem Fenster unter dem Hauptbildschirm) verwenden.

Sie können die Konsolen- oder Befehlszeilen-APIs verwenden. Sie können in die Konsole schreiben, Ihre Elemente formatieren und Ausgaben formatieren, die Ausführungs- oder Ladezeit messen, die Zeitleiste anzeigen und markieren, Anweisungen zählen, Haltepunkte setzen, Ausdrücke auswerten, Ereignisse überwachen, Meldungen stapeln, Fehler und Warnungen anzeigen und vieles mehr mehr.

Dies ist ein mächtiges Werkzeug, aber es gibt eine Menge zu verwenden. Glücklicherweise wird gutes Referenzmaterial mit Beispielen zur Verwendung geliefert.

Debuggen

Wenn Sie Strg + P in Windows oder cmd + P auf Mac auswählen, wird der Debug-Bildschirm geöffnet, in dem Sie die zu debuggenden Skripte auswählen können. Dieses Tool bietet Ihnen die Debugging-Funktionen, die Sie in jeder Programmierumgebung erwarten würden: Anhalten, Fortfahren, Einsteigen, Überspringen, Haltepunkte, formatierter Code usw.

Detaillierte Hilfedateien werden bereitgestellt, um Sie durch die Verwendung des Debugging-Modus zu führen.

CSS-Stile-Fenster

Die Box ganz rechts enthält alle CSS-Informationen. Wenn Sie ein Element auswählen, werden im Fenster Stile rechts die Stilinformationen für das Element angezeigt. Dieser Abschnitt ist interessant. Es gibt fünf Werkzeuggruppen: Stile, Berechnet, Ereignislistener, DOM-Haltepunkte und Eigenschaften.

Stile

In diesem Fenster können Sie die Stile auswählen und manuell ändern. Sie können beispielsweise die Schriftgröße und -farbe auswählen.

Wählen Sie die Schriftgröße und geben Sie Ihre eigene Größe ein. Wenn Sie dies tun, ändert sich die Schriftgröße der ausgewählten Schriftart auf dem Bildschirm.

Wenn Sie eine Schriftfarbe auswählen, wird die Farbauswahl geöffnet. Wählen Sie die gewünschte Farbe aus und drücken Sie die Eingabetaste. Sie sehen, dass die von Ihnen ausgewählte Schriftart in die neue Farbe geändert wird. Dies ist eine großartige Möglichkeit, neue Schriftarten, -größen und -farben auszuprobieren.

Wenn Sie rechts auf site.CSS klicken, öffnen Sie ein größeres Fenster mit den detaillierten Informationen. Hier können Sie den Namen der Schriftart eingeben, die Sie verwenden möchten, eine Farbe angeben, eine Größe angeben usw.

Berechnet

Dies zeigt die Boxgröße in Pixeln an. Es hat Auffüllung, Rand und Rand.

Gerätemodus

Links zwischen der Lupe und dem Elements-Menü befindet sich ein kleiner Button, der wie ein mobiles Gerät aussieht. Erraten Sie, was? Es ist ein mobiles Gerät. Dies ist der Geräteemulationsmodus. Dies ist eine großartige Möglichkeit, um zu sehen, wie reaktionsschnell Ihre Website ist.

Gerät

Was noch cooler ist, als nur ein mobiles Gerät zu sein, ist, dass Sie auswählen können, welches mobile Gerät es ist, und dann die Website so sehen können, als würden Sie sie auf diesem Gerät betrachten. Nun, DAS ist großartig!

Ich wählte Amazon Kindle Fire HDX 7" aus und der Bildschirm ahmte dieses Gerät nach, damit ich sehen konnte, wie die Website auf dem Bildschirm aussehen würde und wie die Berührung funktionieren würde.

Sie können die Ausrichtung des Bildschirms ändern, indem Sie auf die Schaltfläche Abmessungen tauschen klicken.

Dies ist eine großartige Möglichkeit, um zu sehen, wie Ihre WordPress-Site auf dem kleineren mobilen Bildschirm aussieht. Ich entschied mich für iPhone 6 und die Bildschirmgröße wurde an die neue Bildschirmgröße und Auflösung angepasst. Es gibt viele Geräte zum Anzeigen. Sie können auch eine benutzerdefinierte Größe anzeigen, indem Sie die Seiten ziehen, um die Größe zu vergrößern oder zu verkleinern.

Netzwerk

Es gibt auch eine Auswahl zur Auswahl des Netzwerktyps, über den Sie auf die Site zugreifen. Auf diese Weise können Sie die Leistung Ihrer Website über verschiedene Verbindungstypen und Geschwindigkeiten sehen. Sie können verschiedene Geschwindigkeiten von 50 Kbit/s GPRS bis 30 Mbit/s WLAN sowie mehrere 2G-, 3G- und 4G-Verbindungsgeschwindigkeiten testen. Dies ist eine hervorragende Möglichkeit, die Geschwindigkeit Ihrer Website durch kariöse Netzwerke zu testen und Erkenntnisse darüber zu erhalten, was verbessert werden muss.

Medien-Anfragen

Oben links befindet sich ein kleiner Knopf, der wie Treppenstufen aussieht. Es öffnet einen weiteren Bildschirmabschnitt über dem Website-Fenster, der verschiedene Pixelbreiten anzeigt. Wenn Sie darauf klicken, wird der mobile Bildschirm auf diese Größe gebracht. Sie zeigen dir:

• Abfragen, die auf eine maximale Breite abzielen
• Breiten innerhalb eines Bereichs
• Abfragen, die auf eine Mindestbreite abzielen

Dies hilft Ihnen, die Stile und Medieninhalte für ein vollständig responsives Design anzupassen.

Die Schublade

Unter dem Hauptbildschirm befindet sich ein weiterer Abschnitt mit Werkzeugen, der als Schublade bezeichnet wird. Dies fügt hinzu:

Konsole – Dies ist die gleiche Konsole wie im Hauptfenster. Wenn Sie es hier platzieren, können Sie es zusammen mit allen Werkzeugen im Hauptfenster verwenden.

Suchen – Ermöglicht die Suche nach Quellen.

Emulation – Sie können Gerät (Hier können Sie Modell, Auflösung, Netzwerk usw. auswählen), Medien, Netzwerk (Durchsatz und Benutzeragent) und Sensoren (Touchscreen, Beschleunigungsmesser usw.) auswählen.

Rendern – Zeigen Sie Malrechtecke, zusammengesetzte Ebenenränder, FPS-Meter, kontinuierliches Neuzeichnen von Seiten und potenzielle Scroll-Engpässe an.

Einstellungen und mehr

Die Menüleiste auf der rechten Seite zeigt Ihnen die Anzahl der Fehler und Warnungen auf Ihrer Site an, ermöglicht Ihnen das Ausblenden der Schublade unten, die Anpassung der Einstellungen und das Andocken des Tools an das Hauptfenster (Erstellen eines geteilten Bildschirms zwischen Ihre Website und die DevTools).

Es gibt eine Vielzahl von Einstellungen, die Sie anpassen können, damit Sie die Werkzeuge so ändern können, wie Sie sie benötigen.

Chrom Kanarienvogel

Wenn Sie wirklich auf dem neuesten Stand der Chrome DevTools von Google sein möchten, dann probieren Sie Chrome Canary aus. Sein Symbol ist gelb. Kapiert? Es braucht einen Umhang. Es ist das neueste und beste von Google. Es wurde für Entwickler entwickelt und verfügt über die neueste Version der DevTools. Es ist noch nicht stabil genug für den allgemeinen Gebrauch, daher wird es wahrscheinlich Ihr System beschädigen.

Wenn Sie bei einem Systemausfall Ihrer Umgebung ernsthaften Schaden zufügen, sehen Sie sich das Chrome Canary-Symbol im Bild oben an und blinzeln Sie fünf Sekunden lang nicht.

Jetzt können Sie zum Ende gehen. Sie werden sich nicht an diesen Teil erinnern.

Einpacken

Die Entwicklertools von Google Chrome sind ein großartiges Tool zur Fehlerbehebung, zur Verbesserung der Netzwerkleistung, zur Anzeige Ihrer Website auf verschiedenen Bildschirmgrößen und Auflösungen und zum Abrufen von Informationen darüber, wo Ihre Website verbessert werden muss. Es gibt viele Funktionen und Sie können durch Erweiterungen noch mehr hinzufügen. Diese Tools allein sind ein guter Grund, Google Chrome zu installieren, auch wenn es nicht Ihr primärer Browser ist. Es zahlt sich aus, sich die Zeit zu nehmen, die Funktionen kennenzulernen, und Ihre Website und Besucher werden es Ihnen danken.

Du bist dran! Verwenden Sie Chrome-Entwicklertools? Habe ich dein Lieblingsfeature weggelassen? Haben Sie etwas hinzuzufügen? Ich würde gerne in den Kommentaren unten davon hören!

Miniaturansicht des Artikels von Anikei / shutterstock.com