Memeriksa dan Mengedit Laman dan Gaya

Memeriksa dan mengedit langsung HTML dan CSS laman menggunakan panel Elements pada Chrome DevTools.

Panel Chrome DevTools Elements

TL;DR

  • Memeriksa dan mengedit langsung elemen apa pun di pohon DOM di panel Elements.
  • Menampilkan dan mengubah aturan CSS yang diterapkan pada elemen yang dipilih di panel Styles.
  • Menampilkan dan mengedit model kotak elemen yang dipilih di panel Computed.
  • Menampilkan perubahan apa pun yang dibuat pada laman Anda secara lokal di panel Sources.

Mengedit langsung simpul DOM

Untuk mengedit langsung simpul DOM, cukup klik dua kali elemen yang dipilih dan buat perubahan:

Tampilan pohon DOM menampilkan keadaan terkini pohon tersebut, yang belum tentu sesuai dengan HTML yang dimuat semula karena berbagai alasan. Misalnya, Anda bisa mengubah pohon DOM menggunakan JavaScript, mesin browser bisa mencoba memperbaiki markup penulisan yang tidak valid dan menghasilkan DOM yang tidak diharapkan.

Mengedit langsung gaya

Edit langsung nama dan nilai properti gaya di panel Styles. Semua gaya bisa diedit, kecuali yang diwarnai abu-abu (seperti halnya stylesheet agen-pengguna).

Untuk mengedit nama atau nilai, klik nama atau nilai tersebut, lakukan perubahan, dan tekan Tab atau Enter untuk menyimpan perubahan itu.

edit nama properti

Secara default, perubahan CSS Anda tidak permanen, perubahan akan hilang saat Anda memuat ulang laman. Siapkan penulisan persisten jika Anda ingin mempertahankan perubahan Anda antar pemuatan laman.

Memeriksa dan mengedit parameter model kotak

Periksa dan edit parameter model kotak untuk elemen saat ini menggunakan panel Computed. Semua nilai di model kotak bisa diedit, cukup klik nilai tersebut.

Panel Computed

Kotak konsentris berisi nilai top, bottom, left, right untuk properti padding, border, dan margin elemen saat ini.

Untuk elemen yang posisinya tidak statis, kotak position juga ditampilkan, yang berisi nilai properti top, right, bottom, dan left.

elemen computed non-statis

Untuk elemen position: fixed dan position: absolute, bidang tengah berisi dimensi piksel offsetWidth × offsetHeight sebenarnya dari elemen yang dipilih. Semua nilai bisa diubah dengan mengeklik dua kali nilai tersebut, seperti nilai properti di panel Styles. Akan tetapi, perubahan tidak dijamin memberi dampak, karena ini tergantung pada detail penentuan posisi elemen sebenarnya.

memperbaiki elemen computed

Menampilkan perubahan lokal

Untuk menampilkan riwayat pengeditan langsung yang dibuat pada laman Anda:

  1. Di panel Styles, klik file yang sudah Anda ubah. DevTools akan membuka panel Sources.
  2. Klik kanan file.
  3. Pilih Local modifications.

Untuk menjelajah perubahan yang dibuat:

  • Luaskan nama file tingkat atas untuk melihat waktu waktu saat perubahan terjadi saat perubahan terjadi.
  • Luaskan item tingkat kedua untuk melihat diff (sebelum dan sesudah) terkait dengan perubahan. Baris dengan latar belakang merah muda menandakan penghapusan, sedangkan baris dengan latar belakang hijau menandakan penambahan.

Mengurungkan perubahan

Jika Anda belum menyiapkan penulisan persisten, setiap kali Anda memuat ulang laman, semua pengeditan langsung akan hilang.

Jika Anda sudah menyiapkan penulisan persisten, untuk mengurungkan perubahan:

  • Gunakan Ctrl+Z (Windows) atau Cmd+Z (Mac) untuk secara cepat mengurungkan perubahan minor pada DOM atau gaya melalui panel Elements.

  • Untuk mengurungkan semua perubahan lokal yang dibuat pada file, buka panel Sources dan pilih revert di sebelah nama file.