I denne opplæringen handler det om effektiv bruk av Chrome Developer Tools og deres innstillinger. Du vil lære hvordan du kan konfigurere DevTools slik at de passer til arbeidsstilen din. Emner som utseendet på verktøyene, tastatursnarveier og andre funksjonsinnstillinger står i fokus. Med disse praktiske tilpasningene kan du betydelig optimalisere arbeidsflyten din og arbeide mer effektivt.
Viktigste funn
- Du kan tilpasse utseendet på Developer Tools ved å veksle mellom lyse og mørke temaer.
- Språket på Developer Tools kan endres for å unngå forvirring ved oversatte begreper.
- JavaScript-kildekart er nyttige for feilsøking. De bør slås av eller på ved behov.
- Det finnes mange nyttige innstillinger for konsollen som styrer visningen av loggmeldinger.
Trinnvis veiledning
Åpne innstillinger
For å åpne innstillingene for Chrome Developer Tools, klikk på tannhjulsymbolet øverst til høyre i DevTools-vinduet. Der vil du finne et mangfold av tilpasningsalternativer.
Tilpass utseendet
I innstillingene kan du under fanen "Utseende" velge mellom lyse og mørke temaer. Dette kan gjøre arbeidet mer behagelig, spesielt under ulike lysforhold. Du kan også velge temaet du foretrekker basert på datamaskinens systeminnstillinger.
Tilpass språket
Språket på DevTools kan endres under innstillingene. Her kan du for eksempel velge å vise alt på engelsk for å unngå oversettelsesproblemer med visse begreper.
JavaScript-kildekart
Under "Preferanser" kan du aktivere eller deaktivere JavaScript-kildekart. Kildekart er spesielt nyttige for å se originalkoden under feilsøking. Pass på å slå det av eller på etter behov, spesielt hvis du har problemer med å nå riktig linje.
Pretty Print
Med "Pretty Print"-funksjonen kan du konvertere minifisert JavaScript til et mer leselig format. Dette er nyttig når du jobber med obfuskert kode. Du kan aktivere denne opsjonen i kildeinformasjonen.
Vis hvite tegn
I innstillingene kan du også aktivere hvite tegn. Dette kan være nyttig for å vise mellomrom og andre usynlige tegn i koden din som kan forårsake problemer.
Inline feilsøkingsalternativer
Under "Preferanser" finnes det en opsjon for å justere visningen av variabelverdier under feilsøking. Du kan aktivere eller deaktivere denne visningen etter behov.
Tilpass nettverkslogg
I nettverksinnstillingene kan du aktivere "Behold logg ved navigering". Dette gjør at logger forblir selv etter at du har flyttet til en annen side, noe som kan være nyttig for å se all nettverksaktivitet under testene dine.
Tilpass tastatursnarveier
Chrome Developer Tools tilbyr også muligheten til å tilpasse tastatursnarveier. Hvis du ønsker å omdefinere visse taster for funksjoner som "Toggle Breakpoint" eller "Step Over", kan du gjøre dette i innstillingene under "Snarveier". Disse tilpasningene kan betydelig øke arbeidsflyten din.
Eksperimentelle funksjoner
I innstillingene finner du en seksjon for eksperimentelle funksjoner. Her kan du aktivere nye funksjoner som kanskje ikke er stabile ennå. Vær imidlertid forsiktig, da disse noen ganger kan føre til uventet atferd.
Administrasjon av ignorereliste
I ignorerelisten kan du administrere bestemte skript som ikke skal bli lagt merke til av utviklertøyene. Du kan legge til eller fjerne skript her for å optimalisere feilsøkingsopplevelsen.
Emulering av mobile enheter
Under "Enheter" kan du emulere ulike mobile enheter. Dette er nyttig for å teste hvordan applikasjonen din ser ut på ulike skjermstørrelser og oppløsninger.
Oppsummering
I denne veiledningen har du lært hvordan du kan tilpasse de viktigste innstillingene i Chrome-utviklertøyene for å forbedre arbeidsflyten din. Fra tilpasning av utseendet til spesifikke feilsøkingsalternativer har du nå verktøyene til å jobbe mer produktivt. Prøv ut de ulike innstillingene for å finne din perfekte arbeidsflyt.
