Untersuchen Sie Box-Modell eines Elements leicht mit XRAY

Wollten Sie schon immer einmal die genaue Größe eines bestimmten Elements auf einer Webseite kennen, wie etwa das Padding, den Rand, die Position und so weiter? Normalerweise können Sie die Informationen mit einem Web-Inspection-Tool erhalten; Die meisten Browser verfügen über integrierte Tools, die Ihnen dabei helfen. Alternativ können Sie Firebug verwenden, das auch ein ziemlich beliebtes Web-Tool ist. Wenn die Dinge jedoch kompliziert werden, müssen Sie vielleicht auf ein Werkzeug wie XRAY zurückgreifen.

XRAY ist ein kostenloses browserübergreifendes Tool, mit dem Sie das Boxmodell für jedes Element einer Webseite direkt in Ihrem Browser anzeigen können. Im Gegensatz zu anderen komplizierten Webinspektionstools konzentriert sich XRAY darauf , Ihnen vollständige Informationen über das Boxmodell des Elements zu geben.

Anfangen

XRAY ist ein Bookmarklet. Um es zu verwenden, ziehen Sie XRAY in Ihre Lesezeichenleiste Ihres bevorzugten Browsers. XRAY ist für IE6 +, Webkit- und Mozilla-basierte Browser wie Safari und Firefox verfügbar.

Genau wie andere Bookmarklets kann XRAY nicht funktionieren, wenn das SSL-Protokoll (HTTPS) angewendet wird .

Elemente überprüfen

Um mit der Überprüfung zu beginnen, öffnen Sie eine Webseite, die Sie untersuchen möchten, stellen Sie sicher, dass sie vollständig geladen ist, und klicken Sie auf das XRAY-Lesezeichen. Sie erhalten eine neue Popup-Box in Ihrem Browser. In diesem Feld werden alle Informationen zu dem ausgewählten Element angezeigt.

Nehmen wir als Beispiel meine Inspektion der XRAY-Homepage. Angenommen, ich möchte die Boxmodellinformationen des folgenden Elements kennen.

Ich klicke auf XRAY in der Lesezeichenleiste und wähle das Element aus. Dies gibt mir den Namen des Elements, ID, Klasse, Hierarchie, Position, Polsterung, Rand und Rand .

Um die Box zu schließen, drücken Sie einfach die X-Taste in der oberen rechten Ecke der Box oder aktualisieren Sie Ihre Seite, um das Tool zu beenden.

Letzter Gedanke

Abgesehen von der erweiterten Boxmodell-Inspektionsfunktion bietet XRAY Ihnen nicht die Informationen, die üblicherweise in anderen Web-Inspektionswerkzeugen wie dem Style oder DOM zur Verfügung stehen . Trotzdem ist es immer noch ein hilfreiches und einfach zu bedienendes Werkzeug für den täglichen Gebrauch.

Wie man HTML benutzt