CSS Inspector

Olitpa sitten selvittämässä asetteluongelmaa, purkamassa auki ihailemasi sivuston designia tai tarkistamassa nopeasti välistys- ja typografia-arvoja, CSS Inspector tarjoaa kaiken tarvittavan siistissä, kelluvassa paneelissa. Toisin kuin selaimen DevTools, se ei ole tiellä — ei kiinnitettyjä paneeleita, ei näkymän koon muuttumista. Vie hiiri elementin päälle, klikkaa ja tarkastele. Työkalu näyttää lasketut tyylit (sen, mitä selain todellisuudessa renderöi) eikä vain kirjoitettua CSS:ää. Tämä tarkoittaa, että näet todelliset arvot sen jälkeen, kun periytyminen, spesifisyys ja kaskadi on ratkaistu — samat arvot, jotka vaikuttavat siihen, mitä käyttäjät näkevät ruudulla.

Elementin tarkastelu ei koskaan laukaise sivun reflow'ta tai repaintia, joten voit tutkia vapaasti murehtimatta vieritysasennon, animaatioiden tai JavaScript-tilan häiriintymisestä. Myös pseudoelementit, kuten ::before ja ::after, ovat tuettuja — vie hiiri emoelementin päälle, ja paneeli näyttää generoidun sisällön tyylit erikseen elementin omista tyyleistä. CSS:n mukautetut ominaisuudet (muuttujat) ratkaistaan lopulliseksi lasketuksi arvokseen, mutta paneeli näyttää myös muuttujan nimen, joka tuotti kyseisen arvon, joten voit jäljittää väri- tai välistysarvon takaisin sen design-tokenin lähteelle sen sijaan, että näkisit pelkän raa'an pikseliluvun.

Päivittäisessä käytössä useimmat kehittäjät turvautuvat CSS Inspectoriin kymmeniä kertoja istunnon aikana — tarkistaakseen, miksi marginaali romahti, varmistaakseen heksakoodin ennen sen kopioimista tyylitiedostoon tai varmistaakseen, että media query -katkaisukohta todella sovelsi sille tarkoitetut tyylit. Koska kyseessä on kelluva paneeli eikä koko selaimen laajuinen tila, voit pitää sen auki vaihtaessasi välilehteä tarkistaaksesi oman koodieditorisi tai design-tiedoston ja palata sitten suoraan samaan hiiren kohdistaman elementin kohdalle menettämättä paikkaasi.