Chrome DevTools er en af de største grunde til, at udviklere nægter at røre ved nogen anden browser.
Men de fleste af os bruger kun en håndfuld funktioner og forbliver uvidende om mange flere overvældende funktioner, der frigives lydløst.
Lad os afdække nogle af disse skjulte perler!
Alle har deres yndlingsoperativsystem, hardwareplatform, enhedstype, enhedsformfaktor osv. Men én ting er fælles for alle – de kører Chrome-browseren og kun Chrome-browseren! Jeg tror, det er sikkert at sige, at browserkrigene er forbi, og Chrome har vundet overbevisende.
Windows-brugere bruger kun standardbrowseren til at downloade Chrome og derefter bruge Chrome og ignorerer alle “anbefalinger” fra Windows. Det samme gælder for Apples enheder (især MacBooks og enheder med større skærm), hvor brugere og udviklere undgår Safari på trods af Apples mange stærke påstande og konverteringstaktikker.
Og hvis en enhed ikke kører Chrome, er chancerne store, at den kører en Chrome-kompatibel spinoff som f.eks Modig eller Vivaldi. Ja, jeg ved godt, teknisk set er disse browsere ikke baseret på Chrome, men det er en anden diskussion. Den gennemsnitlige bruger bruger måske disse andre browsere af ideologiske eller særlige grunde, men når det kommer til udviklere, er der ingen anden browser i sigte undtagen Chrome.
Selv det faktum, at det er et hukommelsesædende monster, bliver ignoreret. Årsagen er enkel: Chrome DevTools.
Billedkilde: Officielle Chrome DevTools-dokumenter
Nu, hvis du læser denne artikel, er det sikkert at antage, at du enten er en superbruger, en tudemand, en webudvikler eller noget i den retning. Som sådan har ingen af os brug for en introduktion til DevTools, hvordan man åbner det, dets forskellige funktioner osv.
Lad os i stedet, uden at spilde nogen tid, dykke direkte ned i nogle af de mindre kendte, men forbavsende nyttige funktioner i Chrome DevTools.
Indholdsfortegnelse
Designtilstand
En af de ting, udviklere rutinemæssigt gør, er at inspicere et element på siden og derefter ændre dets HTML for at få vist noget eller teste effekten af en ændring.
At arbejde med HTML direkte i DevTools er dog ikke den glatteste ting nogensinde – at vade gennem tag-suppen, anstrenge dine øjne for at finde den rigtige åbnings-/lukkeparentes og håndtere en latterlig mængde mellemrum, mens du redigerer tekst (whitespace, der mangler tydeligvis i det dokument, du ser), er nogle af de problemer, du kan blive nødt til at håndtere. Det er endnu værre, hvis du er designer og ikke ønsker at finde rundt i rodet.
Her er et skærmbillede fra en af siderne på netop denne hjemmeside (toadmin.dk):
Den dybt indlejrede HTML og mystiske, forvirrende CSS-klasser er typiske for enhver ikke-triviel hjemmeside i dag, hvor oplevelsen med DevTools mildest talt er suboptimal. 🤭
Men der er en DevTools-funktion kaldet Design Mode, som kan mindske smerten i mange tilfælde. Ved at bruge designtilstanden (det er i øvrigt ikke det officielle navn; det er bare, hvad folk har navngivet det på grund af, hvordan det bliver aktiveret, og hvad det gør – bare rolig, vi vil se meget snart!), ændres til side kan laves visuelt og live, ligesom at redigere et regneark eller teksteditor! Den eneste fangst er, at denne funktion ikke er slået til som standard, og at aktivere den er lidt af en hovedpine, især for ikke-udviklere.
Under alle omstændigheder er det ret simpelt at gøre det; alt du skal gøre er at følge instruktionerne nedenfor. Afhængigt af hvor du sidder på bruger-raffinement-kurven, kan dette være latterligt nemt eller moderat svært. Her er hvad du skal gøre:
- Sørg for, at den webside, du vil redigere, er indlæst, og at du i øjeblikket kigger på den (det vil sige, at den pågældende fane er den aktive).
- Åbn DevTools-panelet, som du plejer (tastaturgenvej, museklik, hvad som helst). Jeg kan godt lide at bruge tastaturgenveje, og på Mac gør Opt + Cmd + jeg jobbet.
- Nu, med DevTools åbne, skal du gå til fanen kaldet “Konsol”. Nogle af jer ruller måske med øjnene over, hvor fjollet og indlysende alt dette virker, men hey, lad os også tænke på de (hundredvis af?) tusindvis af mennesker derude, som kæmper, mens de arbejder med browserkonsollen og JavaScript (uanset grund ).
- Klik på den første linje ved siden af markøren, som så vil præsentere en skriveprompt, og nu kan du skrive JavaScript-kode der (se skærmbilledet lidt længere nede).
- Nu skal vi skrive noget JavaScript-kode. Bliv ikke bekymret, da det du skal skrive/skrive er meget kort og ligetil: document.designMode = “on”. Du kan også kopiere og indsætte koden fra denne side (hvis du gør det, så sørg for, at formateringen ikke bliver kopieret – vi behøver kun almindelig tekst), eller hvis du føler dig sikker, så skriv den ud.
- Tryk på Enter/Retur.
“Det er det??!”
Ja, det er alt!
Nu kan du frit lave redigeringer på siden, som om det var et dokument. Se denne eksempelvideo, hvor jeg liveredigerer Spotify-webstedet ved hjælp af Design Mode:
Design Mode-funktionen, spændende som den er, er ikke en sølvkugle; du kan for eksempel ikke nemt kopiere og indsætte knapper, ændre deres udseende og så videre. Det faktiske antal ting, den kan gøre sammenlignet med en drømmewebsideeditor, er meget lav; dog løser det brugssager, hvor indhold skal ændres visuelt og i farten.
Når det er sagt, er det ikke for langt ude at påstå, at Chrome-folkene tester, hvor godt denne funktion modtages; hvis den finder god modtagelse og en stærk use case, er det rimeligt at forvente, at mere kraftfulde redigeringsmuligheder snart vil følge! 🤞🏻🤞🏻
Simulering af netværksforhold
Netværksfanen i Chrome DevTools er måske den mest udbredte (jeg har selvfølgelig ikke data om den, men som webudvikler har jeg en tendens til at bruge Konsol-fanen måske 20-30 % af tiden, og fanen Netværk resten af tiden). Det giver os alle mulige informationer om de anmodninger, der foretages fra siden, deres type, metadata/headers, status, downloadstatus for aktiver (billeder, stylesheets osv.), indlæsningstider og så videre. Med sådan en utrolig anvendelighed er det ikke underligt, at fanen Netværk er den mest almindelige.
Og alligevel er det ligetil at gå glip af den funktion, vi diskuterer; du har måske ikke bemærket en harmløs dropdown, der siger det åbenlyse: Online.
Hvis du klikker på dette, vil du se en rullemenu med forskellige muligheder, der lader dig drosle netværkshastigheden: Hurtig 3G, Langsom 3G, Offline osv. Selvom der kan være forskellige use cases for denne mulighed, er det mest almindelige at teste hjemmesiden ydeevne på langsomme netværk eller webapp-adfærd, når de er offline (forudsat at sådanne funktioner blev tilføjet).
Lad os tage det her en tur. Jeg indstiller netværket til “Slow 3G” og genindlæser den samme side fra det forrige skærmbillede. Før jeg gør det, bemærk i det tidligere skærmbillede, hvordan på min nuværende netværksforbindelse (en 40 Mbps bredbånd), bliver de fleste aktiver downloadet på under 100 millisekunder.
Og nu er det tid til at se, hvad langsom 3G gør ved det.
Hvilken forskel!
Bemærk, at indlæsningstiden for aktiver nu er i intervallet 5-10 sekunder. Desuden blev siden færdig med at indlæse fuldt ud på 17,25 sekunder! Ja, jeg ved, hvad du tænker, men du skal overveje, at på et langsomt 3G-netværk vil enhver moderne hjemmeside tage flere sekunder at indlæse. Om du vil have hurtig indlæsning på langsomme netværk er en anden ting, selvom det alt i alt skal være en forretningsbeslutning, hvor gevinsterne retfærdiggør indsatsen.
Læg mærke til advarselsikonet på fanen Netværk på skærmbilledet ovenfor. Det er Chromes måde at minde dig om, at du har lavet en ikke-standard, vedvarende ændring, og medmindre du ved, hvad du laver, bør du måske nulstille den.
Interaktiv farvevælger
Inspicering af DOM-elementer i DevTools er noget, vi alle gør stort set hver dag. Vi er også vant til afsnittet med CSS-detaljer, der vises ved siden af, og vi ved, at vi kan redigere det og se resultaterne med det samme.
En lille bekvemmelighed skjult blandt alt dette er, at hvis du klikker på en CSS-farveegenskab, vil en velkendt farvevælger-grænseflade dukke op!
Bemærk, at det ikke er en bare-ben, grundlæggende farvevælger. Det giver dig mulighed for at kontrollere gennemsigtighed, ændre farvesystemer, der bruges, vælge en farve direkte fra siden og meget mere.
Så næste gang du eksperimenterer med et websteds accentfarver, behøver du for eksempel ikke at træne eller gætte på den rigtige værdi for den nuance, du har i tankerne! Faktisk kan mange mennesker godt lide at designe hjemmesider direkte i browseren; for dem er funktioner som disse en gave fra Gud! 🙂
Overvågning af hændelser på sideelementer
Vi er ofte i en situation, hvor vi ville ønske, at vi vidste, hvad der foregik med det ene specifikke element, vi er interesseret i. Dette er især sandt, når du bruger jQuery i en ikke-triviel kodebase – hvad enten det er din eller andres; hændelseshandlere og logik er spredt over det hele, og at spore en fejl kan være et mareridt.
Heldigvis har Chrome DevTools en smart funktion til netop dette. Det vil observere det angivne element for dig og logge begivenhederne til konsollen. Men der er lidt af en skuffelse: denne funktion har ikke mulighed for elementvalg baseret på CSS-klassenavne. Så jQuery-metoden $(“#email”) er ikke tilgængelig. 🙂
Med det sagt, lad os se, hvordan man får det til at fungere. Vi begynder med at lave et simpelt “inspektér element” ved hjælp af DevTools-inspektøren. Ja, det er det samme inspektionsværktøj, vi bruger hver dag.
I skærmbilledet nedenfor har jeg brugt inspektørværktøjet til at fremhæve tekstinput. Med “fremhæv” mener jeg ikke, at elementet på siden er fremhævet (det er det ikke, som du kan se); snarere blev inspektørmarkøren klikket på tekstinputtet, og den tilsvarende HTML-kode i DevTools er fremhævet.
Når du gør dette, målrettes det aktuelt inspicerede element til hændelsesovervågning, hvilket gør elementet tilgængeligt som en speciel JavaScript-variabel kaldet $0. For at sikre mig, at jeg ikke skødesløst klikker andre steder i browservinduet (især HTML-kodedelen), klikker jeg på konsollen og vedhæfter en begivenhedslytter til denne tekstinput. Til dette behøver jeg kun en enkelt kodelinje: monitorEvents($0, ‘mus’). “Mus”-delen her fortæller Chrome, at jeg kun er interesseret i at se efter mus-baserede begivenheder.
Så snart jeg trykker på Enter/Return, aktiveres overvågning, og hvis jeg nu svæver over eller klikker på tekstinputtet, logges disse hændelser til konsollen som JavaScript-objekter:
Som du kan se på skærmbilledet, blev flere typer musehændelser fanget, da jeg klikkede på elementet, skrev mit navn og derefter flyttede musen væk (indtastningsbegivenhederne, som er tastaturbegivenheder, blev ikke logget). Hændelserne er selve JavaScript-objekter, som det fremgår af skærmbilledet; hvert hændelsesobjekt indeholder en enorm mængde information. For eksempel udvidede jeg begivenhedsobjektet “klik”, og antallet af egenskaber kunne ikke passe alle i et enkelt skærmbillede!
Jeg opfordrer dig til at prøve denne funktion med det samme, da den helt sikkert vil spare dig for en masse hovedpine i dine kommende projekter!
Rapporter om hjemmesidens ydeevne
I disse dage skaber eller ødelægger hjemmesidens ydeevne en virksomhed/hjemmeside. Selv en lille stigning i ydeevnen betyder massive SEO-gevinster såvel som brugertilfredshed. Men hvordan ved du, hvilke dele af din hjemmeside der kræver opmærksomhed, og hvilke der allerede er gode?
Har du brug for at hyre et team af eksperter og vente tålmodigt i et par dage?
Nå, der er tilfælde, hvor det skal gøres, men heldigvis har Chrome DevTools os andre dækket. I de seneste versioner af Chrome (slutningen af 2020) finder du en Lighthouse-fane i DevTools. For et par måneder siden hed det Audits, og forvirrende nok er det det navn, du vil finde i de officielle dokumenter i skrivende stund. Pointen er i hvert fald, at Lighthouse plejede at være et trendy websted til gratis kontrol af webstedets ydeevne, men så fjernede Google det (ingen grunde blev givet). Heldigvis dukkede den samme kraftfulde funktionalitet senere op i DevTools.
For at generere en præstationsrapport skal du blot trykke på en enkelt knap, efter at den side, du er interesseret i, er indlæst:
Som du kan se i højre side på skærmbilledet, er der et par muligheder for at kontrollere, hvor meget information du vil have (og selvfølgelig hvad du vil teste for). Når du er tilfreds med indstillingerne, skal du trykke på den store blå knap, læne dig tilbage og slappe af. Et par sekunder senere vil du have en fordelagtig rapport, der ser sådan ud:
Tallene, du ser i ovenstående skærmbillede, viser den samlede score for hver kategori. Kategorien for progressive webapps (PWA’er) er nedtonet, sandsynligvis fordi denne hjemmeside ikke har nogen PWA-funktioner. Som du kan se på rullebjælkens størrelse i skærmbilledet (til højre), er det også en lang rapport.
Sådan ser en del af afsnittet om ydeevne ud:
Jeg vil ikke påstå, at Lighthouse og dets forslag er webstedets hellige gral, men disse er yderst hjælpsomme; det er fordi webstedsejere og -udviklere sjældent har en anelse om, hvilke problemer der eksisterer, og hvordan de præcist skal løses.
Helt ærligt, selv jeg føler mig fortabt som webudvikler, da ydeevne og test har en tendens til at være specialiseringer. Som sådan er Lighthouse et lidet kendt, undervurderet værktøj, nu en del af Chrome DevTools, som er til stor nytte for både virksomhedsejere og udviklere/sysadmins.
Koderedigeringsdygtighed
Fanen Kilder i DevTools giver os adgang til forskellige filer, der er indlæst af webstedet. Det har også funktioner som koderedigering, lagring af uddrag osv. Så meget burde ikke komme som nogen overraskelse for webudviklere. DevTools har dog også et par bekvemmeligheder indbygget, der gør livet lettere for udviklere, der er vant til deres yndlingskode-IDE’er.
DevTools bruger nogle velkendte tastaturgenveje, der vil spare dig tid og minimere frustration med kodeknæk. For eksempel kan Ctrl + D (eller Cmd + D på Mac) bruges til at fremhæve flere forekomster af et ord. På samme måde kan du få flere markører ved at holde Ctrl (eller Cmd på Mac) nede og klikke på flere steder i koden. Se videoen nedenfor for at få en bedre idé:
Hvis du synes, det er fedt, så sørg for at dykke ned i de officielle dokumenter for at drage fordel af alle koderedigeringsfunktioner, som DevTools har at tilbyde.
Kontrol DOM element tilstand
Nogle gange tester eller fejlretter vi noget, men den adfærd, vi jagter, er kun tilgængelig i en bestemt elementtilstand. Afhængigt af hvilken tilstand det er, kan du ende med at have det forfærdeligt; for mig er det “hover”-tilstanden, da jeg husker, at jeg spildte utallige minutter på at prøve at time svævehandlingen eller slå på yderligere, midlertidig CSS osv.
Heldigvis har Chrome DevTools en nem måde at ændre tilstanden af et inspiceret element på. Desuden er muligheden for at gøre det lige der, hvis vi højreklikker på elementet (på fanen Elementer), men i betragtning af antallet af funktioner og presset fra en dags arbejde, er det let at overse dette:
Ja, det er virkelig så enkelt!
Nu behøver du ikke at indbygge betinget testlogik i din kode, skrive yderligere CSS eller springe gennem nogle andre bøjler, når du observerer et element i en anden tilstand.
Værktøjspanel
Sidst men bestemt ikke mindst på denne liste er panelet Værktøjer. Det er en anden af de utroligt nyttige funktioner, der er godt skjult og kun kan ses ved hjælp af tastaturgenveje. Som navnet antyder, er panelet Værktøjer ikke et enkelt værktøj, men et slags dashboard, hvor næsten alle DevTools funktioner er tilgængelige. Da der er alt for mange funktioner, der tilbyder den overordnede DevTools-funktionalitet, er en søgelinje tilgængelig lige øverst.
For at aktivere panelet Værktøjer skal du sørge for, at du er i panelet DevTools og derefter trykke på Ctrl + Shift + P (eller Cmd + Shift + P for Mac-brugere):
Værktøjspanelet er fuld af muligheder og overraskelser. Vidste du for eksempel, at du kunne tage et skærmbillede direkte fra DevTools?
Jeg vil vædde på ikke, for du skal tænde værktøjspanelet og skrive “skærmbillede” i søgefeltet for at afdække det:
Du vil også bemærke flere muligheder for at tage skærmbilleder, inklusive en for den valgte DOM-node! Udforsk værktøjspanelet mere, og jeg forsikrer, at du ikke bliver skuffet!
Hvis du har brug for at tage et skærmbillede af en webside eksternt, så tjek værktøjet toadmin.dk Screenshot.
Konklusion
Chrome-browseren i sig selv er rig på funktioner, men hvor den virkelig skinner er DevTools-tilbuddet. Som vi så i denne artikel, er der en hel del godt skjulte funktioner – og andre gemmer sig i almindeligt øjekast – som et stort flertal af brugere ikke kender til. Hvorfor er disse funktioner skjult?
Jeg gætter på, at nogle af disse er meget eksperimentelle (såsom Design Mode), og Chrome-udviklerne ønsker at gøre det svært for almindelige brugere at finde disse funktioner. For resten af de mange funktioner tror jeg, at det simpelthen er et tilfælde af informationsoverbelastning: hvis der er f.eks. 120 funktioner, hvor nogle af dem har underfunktioner og så videre, er det stort set umuligt at designe den rigtige brugergrænseflade til sådanne et scenarie. Desuden har Google historisk set ikke gjort et godt stykke arbejde med sine produkters UX, så der er det. 🤷🏻♂️
Uanset hvad håber jeg, at du fandt nogle af disse funktioner nyttige. Men endnu vigtigere, jeg håber, at denne artikel gav dig en fornemmelse af, hvad der gemmer sig hvor, så næste gang du vil udforske eller søge efter noget bestemt, ved du, hvor du skal gå hen for at “grave dybt”. 😆