So finden berechnete Größe von jedem element in Chrome Developer Tools?

Ich bin sicher, dass dies irgendwo in der Entwickler-Werkzeuge-Inspektor, aber ich kann es nicht finden. Wo würde ich finden, für ein bestimmtes element (z.B. ein div), die berechneten Abmessungen (Höhe und Breite) von einem bestimmten element, dass ich mit der rechten klicken Sie auf und wählen Sie "Element Untersuchen"?

  • 'Inspect element' Blick auf den rechten Fensterbereich, klicken Sie auf "computed styles" das oberste panel. Oder benutzen Sie den 'metrics' panel. Aber dies ist nicht eine Frage der Programmierung, denke ich.
InformationsquelleAutor Scott B | 2012-04-19
  1. 14

    Nur den Mauszeiger über das element name in der Multifunktionsleiste unter der developer-tools-panel. Das entsprechende element wird hervorgehoben im browser-Fenster, und die Dimensionen werden an einer Ecke. Auch, wenn Sie nach unten scrollen Sie den rechten Bereich in der Entwickler-tools, sehen Sie die 'Metrik' - Fenster die ' ll geben Sie die berechneten Abmessungen und auch die Ränder, Auffüllungen, Grenzen etc.

    Hier ein screenshot von den Abmessungen des div, der hält, was Ihr SO Frage. Beachten Sie die Abmessungen an der unteren linken Ecke des markierten Bereichs, wie ich bewegen Sie die Maus über den div-Namen an der Unterseite. Auf der rechten Seite wird der Metrik-Fenster.

    So finden berechnete Größe von jedem element in Chrome Developer Tools?

    Klicken Sie hier für größeres Bild

    Für die Fragen der Zukunft, nur beziehen sich auf Google schöne Dokumentation ersten.

    • Google-link zur Dokumentation ist nun gebrochen. Seite finden Sie nun unter developer.chrome.com/devtools
    • In der version "46.0.2490.86 m", es gibt keine "Computed styles" und die Metrik-Fenster sagt 100% x 100%. 🙁
    • was bedeutet es, auf die Elemente, die deaktiviert sind ? die Werte werden angezeigt, aber Sie können nicht erweitern oder umgehen, mit denen bestimmte Elemente.
    InformationsquelleAutor Abhranil Das
Schreibe einen Kommentar