← Kembali ke Ciri
Free

Pemeriksa CSS

CSS Inspector adalah alat pembangun yang berkuasa yang membolehkan anda melihat semua sifat CSS mana-mana elemen hanya dengan menuding kepadanya. Klik untuk membekukan gaya, edit secara langsung, dan lihat perubahan diaplikasikan serta-merta pada halaman.

Sama ada anda sedang membetulkan isu susun atur atau mengkaji laman web yang anda suka, CSS Inspector menyediakan semua yang anda perlukan dalam panel terapung yang kemas. Periksa dengan mudah tanpa membuka DevTools pelayar.

Pratonton 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
Ciri-ciri Utama

Paparan Sifat Masa Nyata

Lihat fon, saiz, warna, jarak, dan banyak lagi secara serta-merta apabila anda menuding pada mana-mana elemen.

Klik untuk Membekukan

Klik pada elemen untuk mengunci panel supaya ia tidak hilang, membolehkan pemeriksaan terperinci.

Penyuntingan Gaya Langsung

Dwiklik pada nilai untuk menukarnya secara langsung. Suntingan anda ditunjukkan serta-merta pada halaman.

Salinan Satu Klik

Salin sifat individu atau seluruh blok gaya reka bentuk ke papan keratan dengan satu klik.

Visualisasi Model Kotak

Lihat nilai margin, sempadan, dan padding secara visual.

Saiz & Posisi Elemen

Memaparkan lebar, tinggi, dan kedudukan elemen pada halaman.

Apa Yang Anda Boleh Periksa

CSS Inspector menunjukkan lebih 40 sifat:

Tipografi

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

Model Kotak

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

Susun Atur

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

Latar Belakang

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

Kesan

  • opacity
  • box-shadow
  • text-shadow
  • transform
  • transition
  • cursor
Kes Penggunaan Biasa

Menyelesaikan Isu Susun Atur

Periksa elemen yang tidak dijajarkan dengan ketepatan.

Belajar daripada Reka Bentuk Sedia Ada

Kaji gaya laman web kegemaran anda.

Eksperimen Reka Bentuk Pantas

Uji perubahan sebelum menulis kod.

Ulasan Pelanggan

Tunjukkan perubahan secara langsung semasa mesyuarat.

Pengekstrakan Gaya

Dapatkan kod CSS untuk elemen baharu dengan mudah.

Cara Guna
1

Aktifkan CSS Inspector

Klik pada ikon CSS Inspector dalam bar alat DevSuite Pro.

2

Tuding untuk Memeriksa

Gerakkan kursor anda pada mana-mana elemen untuk melihat sifat.

3

Klik untuk Membekukan

Klik pada elemen untuk mematikan panel.

4

Edit Gaya

Dwiklik pada nilai untuk melaraskannya.

5

Salin & Guna

Salin kod yang dikemas kini dan gunakannya dalam projek anda.

Sedia untuk Mencuba? Pemeriksa CSS?

Pasang DevSuite Pro secara percuma dan buka 39+ alat pembangun untuk pelayar anda.

Tambah ke Chrome Tambah ke Edge Tambah ke FireFox