Verwendung des „Untersuchen“-Tools von Google Chrome für Website-Diagnosen
Google Chrome ist nicht nur ein schneller Verbraucherbrowser – er verbirgt auch eine Vielzahl von Entwicklerfunktionen. Mit dem „Untersuchen“-Tool können Sie einen Teil dieser Leistungsfähigkeit offenbaren. Obwohl es anfangs überwältigend sein kann, gewährt Ihnen das Tool Einblicke, wie Websites aufgebaut sind, und kann Ihnen helfen, Ihre eigenen Seiten zu debuggen.
Zugriff auf das Untersuchen-Tool
Das Untersuchen-Tool finden Sie im Kontextmenü von Chrome.
Klicken Sie mit der rechten Maustaste auf ein beliebiges Element in Ihrem Browser und klicken Sie im Kontextmenü auf „Untersuchen“.
Ein Fenster wird an der Seite des Chrome-Browsers angezeigt, wie unten zu sehen. Dies wird als DevTools-Panel bezeichnet. Wenn Sie jemals Firebug in Firefox verwendet haben, erkennen Sie möglicherweise einige Teile davon.
Hier gibt es viel zu sehen, also lassen Sie uns die einzelnen Teile untersuchen.
Den Inspektor inspizieren
Das Inspektor-Panel ist in mehrere verschiedene Registerkarten unterteilt, die oben im Fenster sichtbar sind. Wir konzentrieren uns auf die Standard-Registerkarte „Elemente“.
Neben diesen Registerkarten gibt es zwei nützliche Schaltflächen. Die erste ist das Untersuchen-Element-Tool.
Mit diesem Tool können Sie mit der Maus über verschiedene DOM-Elemente fahren und diese auswählen, um sie zu inspizieren.
Die zweite Schaltfläche aktiviert den Gerätevorschau-Modus. In diesem Modus können Sie sehen, wie Ihre Webseite bei verschiedenen Auflösungen und Bildschirmgrößen aussieht.
Wenn Sie auf diese Schaltfläche klicken, sehen Sie, wie Ihre Webseite in eine neue Ansicht wechselt.
Sie können dann das Dropdown-Menü über der Seitenvorschau oder die Griffe an den Seiten der Seitenvorschau verwenden, um das Fenster der Gerätevorschau zu ändern.
HTML-Ansicht
Der größte Teil des DevTools-Tabs wird vom HTML-Bereich eingenommen.
Dieser Bereich ist wie eine super leistungsstarke „Quelltext anzeigen“-Funktion. Er ist nach dem DOM strukturiert, wobei Elemente 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 ein Bild inspiziert, das in einem Link enthalten ist. Wie erwartet sehe ich ein hervorgehobenes Ankertag.
Aber wo ist mein Bild? Ich kann alle DOM-Elemente, die im Ankertag verschachtelt sind, sichtbar machen, indem ich auf das Dreieck neben dem klicke. In diesem Fall zeigt der Pfeil das Tag an, das ich erwartet habe zu finden.
Sie werden auch eine kleine Menüleiste am unteren Rand des HTML-Bereichs bemerken.
Dies wird als Breadcrumb-Navigation bezeichnet und zeigt Ihnen alle übergeordneten Elemente des ausgewählten Elements. Um zu einem dieser Elemente zu navigieren, klicken Sie einfach darauf.
Stile
Unterhalb der HTML-Ansicht sehen wir auch einen Bereich, der alle CSS-Regeln anzeigt, die auf unser Element angewendet werden. Dies wird als Stile-Bereich bezeichnet, und in diesem Fall sehen wir alle Regeln, die auf das Ankertag angewendet werden, das ich zuvor inspiziert habe.
Sie können eine Regel aktivieren oder deaktivieren, indem Sie mit der Maus darüber fahren und das Kontrollkästchen daneben anklicken.
Sie werden diese Änderung sofort in der Seitenvorschau sehen. Und wenn Sie direkt auf eine Regel klicken, können Sie ihren Namen und Wert ändern.
Sie können auch nach bestimmten Regeln mit dem Filter-Suchfeld suchen.
Der Stile-Bereich kann jedoch noch viel mehr. Schauen Sie sich die Dokumentation von Google für eine vollständige Erklärung der vielen Funktionen des Stile-Bereichs an.
Box-Modell und berechneter Stil
Neben der Stilansicht befindet sich das Box-Modell für mein ausgewähltes Element. Wenn Sie damit nicht vertraut sind, ist das Box-Modell eine abstrahierte Darstellung des Abstands, der Grenze, der Polsterung und der Inhaltsgröße, die auf ein bestimmtes Element angewendet werden.
In diesem Fall kann ich sehen, dass mein Element eine primäre Größe von 461 x 209 Pixel hat. Es enthält keine Abstands-, Rand- oder Polsterungsregeln, sodass diese Kästchen leer sind.
Wenn Sie ein Element mit einigen Position-, Abstand-, Rand- oder Polsterungsregeln auswählen, könnte Ihr Box-Modell eher so aussehen.
Sie können auch ein in situ Box-Modell sehen, wenn Sie mit dem Untersuchen-Element-Tool über DOM-Elemente fahren.
Unter dem Box-Modell befindet sich eine Liste aller Styling-Regeln, die auf dieses bestimmte Element angewendet werden. Dies unterscheidet sich leicht vom Stile-Bereich. Es zeigt nicht die tatsächlichen CSS-Zeilen an – nur die Auswirkungen dieser Regeln. Dies wird als „berechneter Stil“ des Objekts bezeichnet, und es ist das kombinierte Ergebnis Ihres CSS.
Schließlich können Sie nach bestimmten Regeln suchen, indem Sie in das Filterfeld eingeben.
Fazit
Wenn Sie häufig mit Webseiten arbeiten, ist das Untersuchen-Tool von Chrome sehr empfehlenswert. Und die anderen Registerkarten in DevTools, wie Konsole und Netzwerk, können für Entwickler von unschätzbarem Wert sein. Es gibt mehr, als wir jetzt abdecken können, aber die eigene Dokumentation von Google ist umfassend und nützlich.
