← Tillbaka till funktioner
Free

CSS Inspector

CSS Inspector är ett kraftfullt utvecklarverktyg som låter dig se alla CSS-egenskaper för valfritt element genom att helt enkelt hålla muspekaren över det. Klicka för att låsa stilarna, redigera dem direkt och se ändringarna tillämpas omedelbart på sidan.

Oavsett om du fixar layoutproblem eller studerar en webbplats du gillar, ger CSS Inspector allt du behöver i en ren, flytande panel. Inspektera enkelt utan att öppna webbläsarens DevTools.

Live-förhandsvisning
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
Huvudfunktioner

Visning av egenskaper i realtid

Se teckensnitt, storlekar, färger, avstånd och mer omedelbart när du håller muspekaren över ett element.

Klicka för att låsa

Klicka på elementet för att låsa panelen så att den inte försvinner, vilket möjliggör en detaljerad inspektion.

Live-stilredigering

Dubbelklicka på värden för att ändra dem direkt. Dina redigeringar återspeglas omedelbart på sidan.

Kopiera med ett klick

Kopiera enskilda egenskaper eller hela designstilmallen till ditt urklipp med ett klick.

Visualisering av boxmodellen

Se marginaler, ramar och utfyllnadsvärden visuellt.

Elementstorlek och position

Visar elementets bredd, höjd och position på sidan.

Vad du kan inspektera

CSS Inspector visar över 40 egenskaper:

Typografi

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

Boxmodell

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

Layout

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

Bakgrund

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

Effekter

  • opacity
  • box-shadow
  • text-shadow
  • transform
  • transition
  • cursor
Vanliga användningsområden

Felsökning av layoutproblem

Inspektera feljusterade element med precision.

Lär dig av befintlig design

Studera stilarna på dina favoritwebbplatser.

Snabba designexperiment

Testa ändringar innan du skriver kod.

Kundgranskningar

Visa live-ändringar under möten.

Stilextraktion

Få enkelt CSS-koden för nya element.

Hur man använder
1

Aktivera CSS Inspector

Klicka på CSS Inspector-ikonen i DevSuite Pro-verktygsfältet.

2

Håll muspekaren för att inspektera

Flytta markören över ett element för att se dess egenskaper.

3

Klicka för att låsa

Klicka på elementet för att fästa panelen.

4

Redigera stilar

Dubbelklicka på värden för att justera dem.

5

Kopiera och använd

Kopiera den uppdaterade koden och använd den i ditt projekt.

Redo att prova? CSS Inspector?

Installera DevSuite Pro gratis och lås upp 39+ utvecklarverktyg för din webbläsare.

Lägg till i Chrome Lägg till i Edge Lägg till i FireFox