Verwendung des Google Inspect-Tools "Inspect" für die Website-Diagnose

Google Chrome ist nicht nur ein schneller Browser, sondern verbirgt auch eine Reihe von Entwicklerfunktionen. Sie können einen Teil dieser Kraft mit dem Werkzeug "Inspizieren" aufdecken. Während das Tool zunächst überwältigend ist, gibt es Ihnen Einblicke in die Erstellung von Websites und kann Ihnen beim Debuggen Ihrer Websites helfen.

Zugriff auf das Inspektionswerkzeug

Das Inspect-Tool befindet sich im Kontextmenü von Chrome.

Klicken Sie mit der rechten Maustaste auf ein Element im Browser und klicken Sie im Kontextmenü auf "Überprüfen".

Ein Fenster wird an der Seite des Chrome-Browsers angezeigt (siehe Abbildung unten). Dies wird als DevTools-Bedienfeld bezeichnet. Wenn Sie Firebug jemals in Firefox verwendet haben, erkennen Sie möglicherweise einige Teile davon.

Hier gibt es viel, also lassen Sie uns die Teile einzeln durchgehen.

Inspektion des Inspektors

Das Inspektorfenster ist in mehrere Registerkarten unterteilt, die oben im Fenster angezeigt werden. Wir werden uns auf die Registerkarte Vordefinierte Elemente konzentrieren.

Neben diesen Registerkarten befinden sich zwei nützliche Schaltflächen. Das erste ist das Werkzeug Element untersuchen.

Mit diesem Tool können Sie den Mauszeiger bewegen und die verschiedenen zu prüfenden DOM-Elemente auswählen.

Die zweite Taste aktiviert den Vorschaumodus des Geräts. In diesem Modus können Sie sehen, wie Ihre Webseite in verschiedenen Auflösungen und Bildschirmgrößen aussieht.

Wenn Sie auf diese Schaltfläche klicken, sehen Sie, dass sich Ihre Webseite an eine neue Ansicht anpasst.

Sie können dann das Dropdown-Menü über der Seitenvorschau oder die Steuerelemente an den Seiten der Seitenvorschau verwenden, um die Größe des Gerätevorschaufensters zu ändern.

HTML-Ansicht

Der größte Teil der Registerkarte DevTools wird vom HTML-Bereich eingenommen.

Dieses Panel ist wie eine super leistungsstarke "View Source". Es ist nach strukturiert SONNEmit Elementen, die in ihren übergeordneten Elementen verschachtelt sind.

Sie werden sehen, dass das Element, das Sie zu Beginn "inspiziert" haben, automatisch mit einem grauen oder blauen Hintergrund hervorgehoben wird. Hier habe ich mir ein Bild angesehen, das in einem Link enthalten ist. Wie erwartet sehe ich ein hervorgehobenes Ankertag.

Aber wo ist mein Bild? Ich kann alle im Ankertag verschachtelten DOM-Elemente anzeigen, indem ich auf das Offenlegungsdreieck neben klicke . In diesem Fall zeigt der Pfeil das Tag er erwartete zu finden.

Sie werden auch eine kleine Menüleiste am unteren Rand des HTML-Bedienfelds bemerken.

Dies wird als Breadcrumb-Pfad bezeichnet und zeigt alle Elemente der obersten Ebene für das ausgewählte Element an. Um zu einem dieser Elemente zu springen, klicken Sie einfach darauf.

Stile

Unterhalb der HTML-Ansicht sehen wir auch ein Fenster mit den anyCSS-Regeln, die für unser Element gelten. Dies wird als Stilbedienfeld bezeichnet. In diesem Fall werden alle Regeln angezeigt, die für das zuvor überprüfte Ankertag gelten.

Sie können eine Regel aktivieren und deaktivieren, indem Sie den Mauszeiger darüber bewegen und auf das Kontrollkästchen daneben klicken.

Diese Änderung wird sofort in der Seitenvorschau angezeigt. Wenn Sie direkt auf eine Regel klicken, können Sie deren Namen und Wert ändern.

Sie können auch über das Suchfeld Filter nach bestimmten Regeln suchen.

siehe die Google-Dokumentation Hier finden Sie eine vollständige Erläuterung der zahlreichen Funktionen des Bedienfelds „Stile“.

Fallmodell und berechneter Stil

Neben der Stilansicht befindet sich das Modell Box meines ausgewählten Artikels. Wenn Sie nicht vertraut sind, ist das Box-Modell eine abstrakte Darstellung des Randes, des Rahmens, des Auffüllens und der Größe des Inhalts, der auf ein bestimmtes Element angewendet wird.

In diesem Fall kann ich sehen, dass mein Element eine Primärgröße von 461 x 209 Pixel hat. Es enthält keine Rand-, Rahmen- oder Auffüllregeln, daher sind diese Felder leer.

Wenn Sie ein Element mit bestimmten Positions-, Rand-, Rahmen- oder Auffüllregeln auswählen, sieht das Box-Modell möglicherweise eher so aus.

Sie können eine vorhandene Boxvorlage auch anzeigen, indem Sie mit aktiviertem Werkzeug "Inspect Element" über DOM-Elemente fahren.

Unter dem Box-Modell befindet sich eine Liste aller Stilregeln, die für dieses bestimmte Element gelten. Dies unterscheidet sich geringfügig vom Bedienfeld „Stile“. Es werden nicht die tatsächlichen CSS-Zeilen angezeigt, sondern nur die Auswirkungen dieser Regeln. Dies wird als "berechneter Stil" des Objekts bezeichnet und ist das kombinierte Ergebnis seines CSS.

Schließlich können Sie nach bestimmten Regeln suchen, indem Sie in das Feld Filter eingeben.

Fazit

Wenn Sie häufig mit Webseiten arbeiten, lohnt es sich, das Inspect-Tool von Chrome zu erkunden. Die anderen DevTools-Karten wie Console und Network können für Entwickler von großem Wert sein. Es gibt mehr, als wir derzeit abdecken können, aber Google-Dokumentation es ist vollständig und nützlich.