I år har eg samla ei liste over funksjonar i Dev Tools som eg brukar mykje, og nokon eg gjerne skulle ha visst om tidlegare.
Rendering
Chrome tilbyr fleire verktøy for å måle ytelse – nokre lette, andre meir avanserte.
Frame rendering stats
📜 ctrl-shift-p -> Show frames per second
Her kan du sjå live FPS (frames per second) og GPU-minnebruk. Greit å ha om du vil få ein kjapp idé om når det går skeis.
Paint flashing
📜 ctrl-shift-p -> Show paint flashing rectangles
Lurer du på kva som faktisk blir oppdatert på sida når noko endrar seg? Slå på Paint Flashing, så ser du direkte kva element som blir rendra på nytt.
Performance monitor
📜 ctrl-shift-p -> Show performance monitor
Denne funksjonen viser live statistikk om applikasjonen, inkludert:
CPU-bruk
JS heap size
Antall DOM Nodes
Layouts per sekund
Style recalculations per sekund
Og meir!
Performance-fana
Med Performance-fana kan du ta eit opptak av applikasjonen medan den køyrer. Her får du ein detaljert analyse av kva funksjonar som påverkar ytelsen.
Nyttig for deg som jobbar med webapplikasjonar, men eg anbefalar alle å setje seg inn i denne.
CSS og brukaroppleving
Emulering av visuelle utfordringar
For oss som ser fargar, kan det vere vanskeleg å forstå korleis fargeblinde eller personar med nedsatt syn opplever arbeidet vårt. Men heldigvis kan Chrome emulere ulike synsutfordringar!
📜 ctrl-shift-p -> Show rendering -> Emulate vision deficiencies
Her kan du teste korleis nettsida di ser ut for folk med fargeblindheit, dårleg kontrast eller andre synsutfordringar. Nyttig for å lage meir inkluderande design.
CSS Overview
📜 ctrl-shift-p -> Show CSS overview
Denne funksjonen gir deg ei oversikt over stilar på sida:
Kva fargar er i bruk
Kva skrifttypar som er brukt
Potensielle kontrastproblem
Og meir.
Nyttig både for å analysere andre sider for inspirasjon og for å rydde opp i eigne prosjekt.
Sjå endringar
Har du endra CSS direkte i dev-tools og gløymt kva du gjorde? Eg også. Men no har eg oppdaga "Changes"-funksjonen!
📜 ctrl-shift-p -> Show changes
Her finn du ei oversikt over alle endringane du har gjort i HTML, CSS og JavaScript. Du kan til og med kopiere dei direkte. Eit verktøy som hjelper deg å halde oversikt over justeringane dine.
Håper desse tipsa kan gjere arbeidskvardagen din litt enklare. 🚀