Tambahkan ke Chrome
← Kembali ke Fitur
Free

Pemeriksa CSS

Alat pengembang gratis yang kuat untuk melihat properti CSS yang dihitung dari elemen apa pun secara instan.

Tambahkan ke Chrome Tambah ke Edge Tambahkan ke FireFox

Baik Anda memperbaiki masalah tata letak atau mempelajari situs web yang Anda sukai, CSS Inspector memberi Anda semua yang Anda butuhkan dalam panel mengambang yang bersih. Periksa dengan mudah tanpa membuka DevTools browser.

Pratinjau Langsung
example.com/landing-page CSS Inspector: ON
Hover any element to inspect its CSS
Sign Up Now
button.cta-primary
180 × 48 top: 312px · left: 40px
CSS Properties Locked
<button> .cta-primary
BOX MODEL
margin: 0
padding: 12 24
180 × 48
Typography
font-familyJost, sans-serif
font-size16px
font-weight600
color#ffffff
Layout & Spacing
displayinline-flex
padding12px 24px
border-radius8px
Appearance
background#7c3aed
cursorpointer
transitionall 0.2s ease
Copy All CSS Edit
Fitur Utama

Tampilan Properti Real-time

Lihat font, ukuran, warna, spasi, dan lainnya secara instan sambil mengarahkan kursor ke elemen apa pun.

Klik untuk Mengunci

Klik elemen untuk mengunci panel dan mencegahnya menghilang, memungkinkan pemeriksaan mendetail.

Pengeditan Gaya Langsung

Klik dua kali nilai untuk mengubahnya secara langsung. Edit Anda langsung tercermin di halaman.

Salin Sekali Klik

Salin properti individu atau blok gaya lengkap ke clipboard Anda dengan satu klik.

Visualisasi Box Model

Lihat nilai margin, border, dan padding secara visual.

Dimensi & Posisi Elemen

Lihat lebar, tinggi, dan posisi elemen di halaman.

Apa yang Bisa Anda Periksa

CSS Inspector menunjukkan lebih dari 40 properti:

Tipografi

  • font-family
  • font-size
  • font-weight
  • line-height
  • letter-spacing
  • text-align
  • text-transform
  • color

Kotak Model

  • width
  • height
  • padding
  • margin
  • border
  • border-radius
  • box-sizing

Tata Letak

  • display
  • position
  • top
  • right
  • bottom
  • left
  • z-index
  • float
  • overflow

Latar Belakang

  • background-color
  • background-image
  • background-size
  • background-position

Efek

  • opacity
  • box-shadow
  • text-shadow
  • transform
  • transition
  • cursor
Kasus Penggunaan Umum

Memperbaiki Masalah Tata Letak

Periksa elemen yang tidak selaras dengan presisi tinggi.

Belajar dari Desain yang Ada

Pelajari gaya situs web favorit Anda.

Eksperimen Desain Cepat

Uji perubahan sebelum menulis kode.

Ulasan Klien

Tunjukkan perubahan langsung selama pertemuan.

Ekstraksi Gaya

Dapatkan kode CSS untuk elemen baru dengan mudah.

Cara Menggunakan
1

Aktifkan CSS Inspector

Klik ikon CSS Inspector dari toolbar DevSuite Pro.

2

Arahkan Kursor untuk Memeriksa

Gerakkan kursor Anda ke atas elemen apa pun untuk melihat propertinya.

3

Klik untuk Mengunci

Klik elemen untuk menyematkan panel.

4

Edit Gaya

Klik dua kali nilai untuk menyesuaikannya.

5

Salin & Gunakan

Salin kode yang diperbarui dan gunakan dalam proyek Anda.

Siap untuk Mencoba? Pemeriksa CSS?

Instal DevSuite Pro secara gratis dan buka 39+ alat pengembang untuk browser Anda.

Tambahkan ke Chrome Tambah ke Edge Tambahkan ke FireFox