← Tagasi funktsioonide juurde
Free

CSS Inspector

CSS Inspector on võimas arendustööriist, mis võimaldab teil vaadata mis tahes elemendi täielikke CSS-omadusi, liigutades lihtsalt hiirekursori selle kohale. Klõpsake stiilide lukustamiseks, redigeerige neid otse ja vaadake, kuidas muudatused rakenduvad kohe lehel.

Olenemata sellest, kas parandate paigutuse probleemi või uurite veebisaiti, mis teile meeldib, annab CSS Inspector teile kõik vajaliku puhtas ujuvas paneelis. Uurige hõlpsalt ilma brauseri arendustööriistu avamata.

Reaalajas eelvaade
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
Põhifunktsioonid

Reaalajas omaduste vaade

Vaadake kohe fonte, suurusi, värve, vahesid ja muud, kui liigute mis tahes elemendi kohal.

Klõpsake lukustamiseks

Klõpsake elemendil paneeli lukustamiseks ja selle peitmise vältimiseks, võimaldades üksikasjalikku uurimist.

Stiilide reaalajas redigeerimine

Topeltklõpsake väärtustel, et neid otse muuta. Teie muudatused kajastuvad kohe lehel.

Kopeerimine ühe klikiga

Kopeerige üksikud omadused või kogu stiiliplokk lõikelauale ühe klikiga.

Box Model visualiseerimine

Vaadake veise-, piirde- ja sisemist vahet visuaalselt.

Elemendi mõõtmed ja asukoht

Vaadake elemendi laiust, kõrgust ja asukohta lehel.

Mida saate uurida

CSS Inspector kuvab üle 40 omaduse:

Tüpograafia

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

Box Model

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

Paigutus

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

Taust

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

Efektid

  • opacity
  • box-shadow
  • text-shadow
  • transform
  • transition
  • cursor
Tavalised kasutusjuhud

Paigutusvigade parandamine

Uurige valesti joondatud elemente täpselt.

Õppimine olemasolevatest disainidest

Uurige oma lemmikveebisaitide stiile.

Kiired disainieksperimendid

Testige muudatusi enne koodi kirjutamist.

Kliendiülevaated

Näidake muudatusi reaalajas kohtumiste käigus.

Stiilide ekstraheerimine

Hankige hõlpsalt CSS-kood uute elementide jaoks.

Kuidas kasutada
1

Aktiveerige CSS Inspector

Klõpsake DevSuite Pro tööriistaribalt CSS Inspectori ikooni.

2

Liigutage kursorit uurimiseks

Hõljutage kursorit mis tahes elemendi kohal, et näha selle omadusi.

3

Klõpsake lukustamiseks

Klõpsake elemendil paneeli kinnitamiseks.

4

Redigeerige stiile

Topeltklõpsake väärtustel nende kohandamiseks.

5

Kopeerige ja kasutage

Kopeerige muudetud kood ja kasutage seda oma projektis.

Kas olete valmis proovima? CSS Inspector?

Paigaldage DevSuite Pro tasuta ja avage 39+ arendustööriista oma brauserile.

Lisa Chrome'i Lisa Edge'i Lisa FireFoxi