Saat sebuah elemen “tidak seperti yang ditulis”, pertanyaan pertama yang perlu dijawab bukan siapa yang menang di cascade, melainkan berapa nilai akhir yang benar-benar dipakai browser. Panel Computed menjawab pertanyaan itu: seluruh properti — termasuk yang tidak pernah kita tulis — tampil dengan nilai akhirnya setelah cascade, inheritance, dan perhitungan unit selesai. Perbedaan declared value, computed value, dan used value telah diuraikan tuntas pada Chapter Membaca Computed Styles ; Chapter ini memfokuskan sisi kerjanya: bagaimana panel ini dipakai berpasangan dengan panel Styles untuk memangkas waktu debugging.

Alur Kerja di Panel Computed #

Pilih elemen yang bermasalah, lalu buka tab Computed. Alur yang bisa diulang untuk hampir semua keluhan nilai:

  1. Ketik di kotak filter: mengetik width menyaring ratusan properti menjadi segelintir baris relevan — jauh lebih cepat daripada menggulir daftar alfabetis.
  2. Baca nilai akhirnya: nilai yang tampil adalah hasil akhir, bukan yang kita tulis; 50% tampil sebagai piksel, 1.5em tampil sebagai piksel.
  3. Aktifkan Show all bila perlu: secara bawaan panel hanya menampilkan properti yang nilainya “disetel” secara eksplisit; kotak ini memperlihatkan seluruh properti, termasuk bawaan browser.
  4. Perluas tanda panah pada nilai: panel menampilkan daftar aturan yang menetapkan nilai tersebut, diurutkan sesuai kekuatan cascade — pemenang di atas, yang kalah tercoret.
  5. Naik ke panel Styles: bila perlu menelusuri berkas sumbernya, klik entri tersebut untuk melompat ke aturannya di panel Styles.

Langkah keempat adalah bantuan terbesar: panel Computed tidak berhenti pada “berapa”, tetapi juga menjawab “dari mana”. Untuk properti yang diwariskan seperti color, entri menunjukkan rantai induknya — asal nilai yang tidak tertulis di elemen itu sendiri.

Membaca Konversi pada Demo #

Demo chapter ini menyusun rantai tiga tingkat dengan unit yang berbeda di setiap tingkat:

html konversi-nilai.html (cuplikan) 
<div class="bapak">
  <div class="anak">
    <span class="cucu">Teks cucu.</span>
  </div>
</div>
css konversi-nilai.html (cuplikan) 
.bapak { width: 400px; font-size: 16px; color: rgb(15, 23, 42); }
.anak  { width: 50%; font-size: 1.5em; line-height: 1.5; }
.cucu  { font-size: 1.5em; }

Mari kita telaah apa yang dilihat panel Computed pada setiap elemen:

  1. .bapak: semua nilai yang ditulis sudah absolut, sehingga panel menampilkannya apa adanya — width 400px, font-size 16px, color rgb(15, 23, 42).
  2. .anak pada width: 50%: persen diselesaikan saat layout terhadap lebar induk, jadi panel menampilkan 200px — bukan 50%.
  3. .anak pada font-size: 1.5em: em mengacu pada font-size induk, jadi 1,5 × 16px = 24px.
  4. .anak pada line-height: 1.5: angka tanpa satuan dikalikan font-size elemen sendiri, jadi 1,5 × 24px = 36px.
  5. .cucu pada font-size: 1.5em: induk langsungnya .anak, jadi 1,5 × 24px = 36px — dan warna teksnya ikut mewarisi rgb(15, 23, 42) dari .bapak tanpa satu pun deklarasi warna.

Hasil di Browser:

text 
Panel Computed menampilkan bapak dengan width 400px, font-size 16px,
dan color rgb(15, 23, 42). Anak ditulis 50%, 1.5em, dan 1.5, tetapi
terbaca 200px, 24px, dan line-height 36px. Cucu terbaca font-size 36px
karena 1.5em dihitung dari 24px milik anak. Seluruh angka pada laporan
Hasil di Browser ini diperiksa otomatis oleh harness melalui atribut
data-expected.

Dengan nilai akhir dan sumbernya dapat ditelusuri, sisa pertanyaan debugging yang paling sering menyangkut geometri — di mana kotak ini berada, seberapa besar tiap lapisannya. Alat pemeriksaan visualnya menjadi topik chapter berikutnya.