Idagdag sa Chrome
← Bumalik sa mga Features
Free

CSS Inspector

Ang CSS Inspector ay isang makapangyarihang developer tool na nagbibigay-daan sa iyo na tingnan ang kumpletong mga katangian ng CSS ng anumang elemento sa pamamagitan lamang ng pag-hover ng iyong mouse dito. I-click para i-lock ang mga istilo, i-edit ang mga ito nang direkta, at makita ang iyong mga pagbabago na agad na nailalapat sa pahina.

Idagdag sa Chrome Idagdag sa Edge Idagdag sa FireFox

Inaayos mo man ang isang isyu sa layout o pinag-aaralan ang isang website na gusto mo, ibinibigay sa iyo ng CSS Inspector ang lahat ng kailangan mo sa isang malinis na floating panel. Mag-inspect nang madali nang hindi binubuksan ang browser DevTools.

Live na Preview
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
Mga Pangunahing Tampok

Real-Time na View ng mga Properties

Agad na makita ang mga font, laki, kulay, spacing, at higit pa habang nag-hover ka sa anumang elemento.

I-click para I-lock

I-click ang elemento para i-lock ang panel at pigilan itong mawala, na nagbibigay-daan para sa detalyadong pagsusuri.

Live na Pag-edit ng Styles

I-double-click ang mga halaga para direktang baguhin ang mga ito. Ang iyong mga edisyon ay agad na makikita sa pahina.

Isang-Click na Pagkopya

Kopyahin ang mga indibidwal na properties o ang buong style block sa iyong clipboard sa isang click lang.

Visualisasi Box Model

Tingnan ang margin, border, at padding values nang biswal.

Element Dimensions at Position

Tingnan ang lapad, taas, at posisyon ng elemento sa pahina.

Ano ang Maaari Mong Suriin

Nagpapakita ang CSS Inspector ng mahigit 40 properties:

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
Mga Karaniwang Kaso ng Paggamit

Pag-aayos ng mga Isyu sa Layout

Suriin ang mga misaligned na elemento nang may katumpakan.

Pag-aaral mula sa mga Umiiral na Disenyo

Pag-aralan ang mga istilo ng iyong mga paboritong website.

Mabilis na mga Eksperimento sa Disenyo

Subukan ang mga pagbabago bago isulat ang code.

Mga Review sa Kliyente

Ipakita ang mga pagbabago nang live sa panahon ng mga pagpupulong.

Style Extraction

Madaling makuha ang CSS code para sa mga bagong elemento.

Paano Gamitin
1

I-activate ang CSS Inspector

I-click ang icon ng CSS Inspector mula sa toolbar ng DevSuite Pro.

2

I-hover para Mag-inspect

I-hover ang iyong cursor sa anumang elemento para makita ang mga properties nito.

3

I-click para I-lock

I-click ang elemento para i-pin ang panel.

4

I-edit ang Styles

I-double-click ang mga halaga para ayusin ang mga ito.

5

Kopyahin at Gamitin

Kopyahin ang binagong code at gamitin ito sa iyong proyekto.

Handa na bang Subukan? CSS Inspector?

I-install ang DevSuite Pro nang libre at i-unlock ang 39+ developer tools para sa iyong browser.

Idagdag sa Chrome Idagdag sa Edge Idagdag sa FireFox