De CSS Inspecteur is een krachtig, gratis ontwikkelaarstool waarmee u over elk element op een webpagina kunt bewegen om direct de berekende CSS-eigenschappen te zien.
Of u nu een lay-outprobleem debugt, een design bestudeert dat u bewondert, of snel spatiëring en typografiewaarden controleert, CSS Inspecteur biedt alles wat u nodig heeft in een schoon, zwevend paneel.
Beweeg over elk element om direct het volledige berekende CSS te zien — lettertypefamilie, grootte, regelhoogte, kleur, achtergrond, opvulling, marge, rand en meer.
Klik op elk element om het zwevende paneel op zijn plaats te vergrendelen.
Dubbelklik op elke CSS-waarde in het paneel om deze direct te bewerken. Wijzigingen worden onmiddellijk op de pagina toegepast.
Kopieer een enkele eigenschap of het volledige stijlblok naar uw klembord met één klik.
Bekijk het volledige box model — inhoudsgebied, opvulling, rand en marge — met pixelwaarden per zijde.
Bekijk breedte, hoogte en positie op de pagina met een semi-transparante overlay.
CSS Inspecteur toont berekende waarden voor 40+ CSS-eigenschappen per categorie:
font-familyfont-sizefont-weightline-heightletter-spacingtext-aligntext-transformcolorwidthheightpaddingmarginborderborder-radiusbox-sizingdisplaypositiontoprightbottomleftz-indexfloatoverflowbackground-colorbackground-imagebackground-sizebackground-positionopacitybox-shadowtext-shadowtransformtransitioncursorBeweeg over verkeerd uitgelijnde elementen om padding, marge en positiewaarden te zien.
Bezoek elke website die u bewondert en inspecteer typografie, spatiëring en kleurkeuzes.
Gebruik live bewerking om visuele wijzigingen te testen voordat u code schrijft.
Controleer snel of het geïmplementeerde design overeenkomt met het mockup.
Inspecteer het referentie-element, kopieer alle CSS-eigenschappen en plak ze als basisstijlen.
Open de DevSuite Pro dock en klik op het CSS Inspecteur-pictogram.
Beweeg uw muis over elk element. Een zwevend paneel toont tagnaam, klassen, afmetingen en CSS-eigenschappen.
Klik op het element dat u wilt inspecteren. Het paneel vergrendelt en verdwijnt niet.
Dubbelklik op een waarde om te bewerken. Druk op Enter om te bevestigen.
Klik op het kopieerpictogram of gebruik "Kopieer alle CSS".
Installeer DevSuite Pro gratis en ontgrendel 39+ ontwikkelaarstools voor uw browser.