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.

Index

    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".

    Verwenden des Werkzeugs

    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.

    Verwenden des Werkzeugs

    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.

    Verwenden des Werkzeugs

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

    Verwenden des Werkzeugs

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

    Verwenden des Werkzeugs

    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.

    Verwenden des Werkzeugs

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

    Verwenden des Werkzeugs

    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.

    Verwenden des Werkzeugs

    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.

    Verwenden des Werkzeugs

    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.

    Verwenden des Werkzeugs

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

    Verwenden des Werkzeugs

    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.

    Verwenden des Werkzeugs

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

    Verwenden des Werkzeugs

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

    Verwenden des Werkzeugs

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

    Verwenden des Werkzeugs

    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.

    Verwenden des Werkzeugs

    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.

    Verwenden des Werkzeugs

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

    Verwenden des Werkzeugs

    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.

    Verwenden des Werkzeugs

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

    Verwenden des Werkzeugs

    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.

    Schreibe einen Kommentar

    Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

    Go up

    Diese Website verwendet Cookies, um Ihnen ein besseres Erlebnis beim Surfen auf der Website zu bieten. Lesen Sie mehr über Cookies