CSS Inspecteur

Of u nu een lay-outprobleem debugt, een design reverse-engineert dat u bewondert, of snel spatiëring en typografiewaarden wilt controleren, CSS Inspector biedt alles wat u nodig heeft in een overzichtelijk, zwevend paneel. In tegenstelling tot de DevTools van de browser staat het u niet in de weg — geen vastgezette panelen, geen aangepaste viewport. Gewoon bewegen, klikken en inspecteren. De tool toont berekende stijlen (wat de browser daadwerkelijk rendert), niet alleen de geschreven CSS. Dit betekent dat u de werkelijke waarden ziet nadat overerving, specificiteit en cascading zijn toegepast — dezelfde waarden die bepalen wat gebruikers op het scherm zien.

Het inspecteren van een element veroorzaakt nooit een reflow of repaint van de pagina zelf, zodat u vrijuit kunt verkennen zonder u zorgen te maken over de scrollpositie, animaties of JavaScript-status. Pseudo-elementen zoals ::before en ::after worden ook ondersteund — beweeg over het bovenliggende element en het paneel toont de stijlen van de gegenereerde inhoud apart van die van het element zelf. CSS custom properties (variabelen) worden herleid tot hun uiteindelijke berekende waarde, maar het paneel toont ook de variabelenaam die deze waarde heeft geproduceerd, zodat u een kleur- of afstandswaarde kunt terugleiden naar de design-tokenbron in plaats van alleen een rauw pixelgetal te zien.

In het dagelijks gebruik grijpen de meeste ontwikkelaars tientallen keren per sessie naar CSS Inspector — om te controleren waarom een margin is ingeklapt, een hex-code te bevestigen voordat deze in een stylesheet wordt gekopieerd, of te verifiëren dat een media query-breakpoint daadwerkelijk de bedoelde stijlen heeft toegepast. Omdat het een zwevend paneel is in plaats van een browserbrede modus, kunt u het open laten staan terwijl u van tabblad wisselt om uw eigen code-editor of een ontwerpbestand te controleren, en vervolgens direct terugkeren naar hetzelfde element zonder uw plek kwijt te raken.