Tarayıcı geliştirici araçları: HTML öğesinin Konumu nedir?

Question

Modern Web Geliştirici araçları (Chrome/FF/IE örneğinde), belirli bir öğenin "Kutu Modeli" ve "Hesaplanan CSS Özellikleri" ni görmenin bir yolunu sunar. Ancak;

Son hesaplanmış/mizanpajı bu tür araçlarla kolayca izlemek için bir yol var mı?

---

tercihen mutlak

, ancak ana kap içinde de uygundur. Önceden bahsedilen [Windows] tarayıcılardan herhangi birini kullanmam uygun, ancak Chrome'u kullanmayı tercih ediyorum.

Answer 1

, yazarak konsol penceresinde bu eleman erişebilirsiniz:

$0

Daha sonra sorgulamak ve Javascript DOM API kullanarak manipüle edebilir, Element.getBoundingClientRect() olarak adlandırılan çok kullanışlı bir yöntemi vardır.

$0.getBoundingClientRect()

ve tarayıcı gibi bir nesne döndürür: Bir öğe seçildiğinde

Yani yapmanız gereken tek şey konsol penceresine aşağıdakileri yazın edilir

{ x: 1081, y: 72, width: 49, height: 28, top: 72, right: 1130, bottom: 99, left: 1081 }

Answer 2

Chrome araçları -> Ayarlar -> Genel -> Öğeler -> Cetvelleri Göster.

Ayrıca, size daha fazla işlevsellik kazandıracak Chrome eklentilerini de yükleyebilirsiniz. Bir öğe seçildiğinde Chrome, Firefox Edge ve IE11 + In