Utforska de Dolda Funktionerna i Chrome DevTools
Chrome DevTools är en av de främsta orsakerna till att utvecklare ofta föredrar Chrome framför andra webbläsare. Verktygen är oumbärliga för webbutveckling, men de flesta av oss nyttjar bara en bråkdel av dess potential. Det finns en mängd imponerande funktioner som ofta förblir okända. Låt oss dyka ner i några av dessa dolda pärlor!
Oavsett om man föredrar Windows, macOS, Android eller någon annan plattform, är en sak säker: majoriteten använder Chrome som sin primära webbläsare. Det verkar som att webbläsarkriget är över, och Chrome har segrat. Användare väljer aktivt bort andra standardwebbläsare som Edge på Windows eller Safari på Apple-enheter, trots att dessa ibland försöker locka med “rekommendationer” eller konverteringstaktik.
Och de som inte använder Chrome direkt, väljer ofta en Chrome-baserad variant som Brave eller Vivaldi. Även om dessa tekniskt sett inte är identiska med Chrome, så är de i praktiken nära nog för de flesta användare. Vanliga användare kan ha sina ideologiska skäl, men för utvecklare är det sällan någon annan webbläsare som övervägs som ett seriöst alternativ.
Även det faktum att Chrome är resurskrävande, ignoreras ofta. Anledningen är enkel: de kraftfulla verktygen som erbjuds av Chrome DevTools.
Bildkälla: Officiella Chrome DevTools-dokument
Om du läser denna artikel, kan vi anta att du är en aktiv användare, en webbutvecklare, eller åtminstone intresserad av de här sakerna. Därför behöver vi inte gå igenom det grundläggande om hur man öppnar DevTools eller dess primära funktioner. Låt oss direkt utforska några av de mindre kända, men otroligt användbara egenskaperna i Chrome DevTools.
Designläge
En vanlig uppgift för utvecklare är att granska ett element på sidan och sedan redigera HTML-koden för att testa eller förhandsgranska ändringar. Att arbeta direkt i HTML-koden i DevTools kan dock vara lite besvärligt, särskilt när det gäller att navigera i taggstrukturer och hantera konstiga whitespace. Detta kan vara ännu mer frustrerande för designers som inte vill trassla med kod.
Ta en titt på den här skärmdumpen från adminvista.com:
Den inkapslade HTML:en och de kryptiska CSS-klasserna är vanliga för de flesta webbplatser idag, vilket kan göra DevTools till en frustrerande upplevelse. Men det finns en DevTools-funktion som kan underlätta detta: Designläge. Denna funktion är inte aktiverad som standard, men genom att aktivera det kan du redigera webbsidan visuellt, ungefär som att redigera ett dokument i ett textredigeringsprogram eller kalkylblad.
Att aktivera designläget är enkelt. Följ stegen nedan:
- Se till att webbsidan som du vill redigera är laddad och aktiv i din webbläsare.
- Öppna DevTools (vanligtvis med kortkommandon, t.ex. Opt + Cmd + I på Mac).
- Gå till fliken ”Konsol”.
- Klicka på den första raden och ange JavaScript-koden:
document.designMode = "on" - Tryck på Enter.
Och det är allt! Nu kan du redigera sidan direkt som om det vore ett dokument. Här är ett exempel på när jag redigerar Spotify-webbplatsen med designläget aktiverat:
Designläget är inte perfekt, det löser inte alla problem med visuell webbredigering, men det är mycket användbart för snabba, visuella justeringar av innehåll. Om denna funktion blir populär är det inte otänkbart att Chrome kommer att lägga till mer avancerade redigeringsmöjligheter i framtiden.
Simulering av Nätverksförhållanden
Fliken ”Nätverk” i Chrome DevTools är kanske den flitigast använda (även om jag som webbutvecklare spenderar mycket tid även i Konsolen). Här får vi information om alla förfrågningar som görs från sidan, deras typ, metadata, status, nedladdningsförlopp, laddningstider, och mycket mer.
En funktion som lätt förbises, är den lilla rullgardinsmenyn som indikerar ”Online.”
Här kan du simulera olika nätverksförhållanden, som ”Snabb 3G”, ”Långsam 3G” eller ”Offline”. Detta är extremt användbart för att testa webbplatsens prestanda i långsammare nätverk eller för att testa webbappens funktionalitet offline.
Låt oss göra ett test. Jag sätter nätverket till ”Långsam 3G” och laddar om samma sida som tidigare. Tidigare, med min 40 Mbps bredbandsuppkoppling, laddades de flesta tillgångarna på mindre än 100 millisekunder.
Här är resultatet efter att jag simulerar ”Långsam 3G”:
Vilken skillnad! Laddningstiderna är nu 5-10 sekunder, och hela webbplatsen tog 17.25 sekunder att ladda. På ett långsamt 3G-nätverk tar det alltid längre tid att ladda moderna webbplatser. Om du vill optimera laddningstiden på långsamma nätverk, krävs det noggrann planering och prioritering.
Observera varningsikonen på fliken ”Nätverk”. Chrome påminner dig om att du har gjort en icke-standard ändring. Om du inte vet vad du gör, kan det vara bra att återställa inställningarna.
Interaktiv Färgväljare
Att inspektera DOM-element i DevTools är en del av webbutvecklarens vardag. Vi är vana vid CSS-detaljer som visas och att vi kan redigera dem direkt. Om du klickar på en CSS-färgegenskap, visas en praktisk färgväljare!
Det här är inte en enkel färgväljare, utan en kraftfull panel som låter dig justera transparens, ändra färgsystem och till och med plocka färg direkt från webbsidan. Nästa gång du experimenterar med färgpaletter, behöver du inte gissa dig fram till rätt nyans. För de som föredrar att designa webbsidor direkt i webbläsaren, är den här funktionen oumbärlig!
Övervaka Händelser på Element
Ofta vill vi veta exakt vad som händer med ett visst element. Särskilt när man använder jQuery i en komplex kodbas, kan händelsehanterare vara utspridda och svåra att följa. Chrome DevTools har en funktion för just det: den kan observera ett element och logga alla händelser till konsolen. Observera att den här funktionen inte stöder elementval baserade på CSS-klassnamn. Så jQuery-sättet, $(“#email”), fungerar inte.
Låt oss se hur det fungerar. Börja med att inspektera ett element med DevTools-inspektören.
I skärmdumpen nedan har jag markerat textinmatningsfältet. Inspektören har klickat på textinmatningen och motsvarande HTML-kod är markerad i DevTools.
Genom att göra detta, är elementet du har inspekterat tillgängligt som en JavaScript-variabel som heter $0. Gå till konsolen och lägg till en händelselyssnare: monitorEvents($0, 'mouse'). ”Mus”-delen indikerar att du bara är intresserad av musbaserade händelser.
När du trycker Enter aktiveras övervakningen. Varje gång du hovrar, klickar eller interagerar med textinmatningen loggas händelserna till konsolen:
Händelserna loggas som JavaScript-objekt, som innehåller en mängd information. Till exempel, jag utökade händelseobjektet ”click”, och det är en stor mängd data som loggas.
Den här funktionen är mycket värdefull och kan spara dig mycket tid i dina kommande projekt!
Rapporter om Webbplatsens Prestanda
Idag är prestandan på en webbplats en avgörande faktor för framgång. Även små förbättringar kan leda till stora SEO-vinster och ökad användarnöjdhet. Men hur vet du vilka delar av din webbplats som behöver optimeras?
Behöver du anställa ett team av experter? Kanske, i vissa fall. Men Chrome DevTools erbjuder ett smidigt alternativ. I de senaste versionerna av Chrome finns en flik som heter ”Lighthouse” (tidigare ”Audits”). Lighthouse är ett verktyg som analyserar webbplatsens prestanda. Tidigare var det en separat webbplats, men nu är det integrerat i DevTools.
För att skapa en prestandarapport behöver du bara trycka på en knapp när du har laddat sidan:
Du kan välja olika inställningar för vad du vill testa. När du är nöjd, tryck på den blå knappen. Efter några sekunder genereras en rapport, som den nedan:
De siffror som visas ovan är det totala resultatet för varje kategori. Kategorin för progressiva webbappar (PWA) är nedtonad, eftersom denna webbplats inte använder PWA-funktioner. Rapporten är lång och detaljerad.
Här är en del av avsnittet om prestanda:
Lighthouse erbjuder inte alltid en perfekt lösning, men verktyget ger värdefulla insikter, och är ovärderligt för att identifiera och lösa prestandaproblem. Som webbutvecklare kan även jag känna mig osäker när det gäller prestanda, eftersom det ofta är ett separat expertområde. Lighthouse är ett kraftfullt och underskattat verktyg som är användbart både för företagsägare och utvecklare.
Kodredigeringsfunktioner
Fliken ”Källor” i DevTools ger tillgång till alla filer som laddas av webbplatsen. Här finns också funktioner för kodredigering och möjligheten att spara kodavsnitt. DevTools erbjuder även flera kortkommandon som underlättar kodredigering, och som gör det enkelt för utvecklare som är vana vid andra IDE:er.
Till exempel, Ctrl + D (eller Cmd + D på Mac) markerar flera förekomster av ett ord. Om du håller nere Ctrl (eller Cmd på Mac) och klickar på olika ställen i koden, kan du skapa flera markörer. Ta en titt på videon nedan:
Om du gillar dessa funktioner, rekommenderas att du kollar de officiella dokumenten för DevTools, där du kan hitta alla kodredigeringsfunktioner.
Kontrollera DOM-Elementets Tillstånd
Ibland, när vi testar eller felsöker, är vi bara intresserade av ett visst tillstånd hos ett element. Vissa tillstånd kan vara knepiga att uppnå, till exempel ”hover”-tillståndet. DevTools erbjuder ett enkelt sätt att ändra tillståndet för ett inspekterat element.
Högerklicka på elementet (på fliken ”Element”), och du kan välja ett av de olika tillstånden:
Det är verkligen så enkelt! Nu behöver du inte skriva ytterligare CSS eller gissa dig fram.
Kommandopalett
Sist, men inte minst på listan, är kommandopaletten. Det är ännu en kraftfull funktion som är väl dold och nås med kortkommandon. Kommandopaletten är inte bara ett verktyg, utan ett nav där nästan alla DevTools-funktioner är tillgängliga. Det finns så många funktioner att ett sökfält är tillgängligt högst upp.
För att aktivera kommandopaletten, tryck Ctrl + Shift + P (eller Cmd + Shift + P för Mac).
Kommandopaletten är full av funktioner och överraskningar. Visste du till exempel att du kan ta en skärmdump direkt från DevTools?
Nej, förmodligen inte, eftersom du måste starta kommandopaletten och skriva ”skärmdump” för att hitta den:
Du kommer också att märka flera alternativ för skärmdumpar. Utforska kommandopaletten mer, du kommer inte att bli besviken!
Om du behöver ta en skärmdump av en webbsida på distans, kan du kolla in adminvista.com:s skärmdumpsverktyg.
Sammanfattning
Chrome är en kraftfull webbläsare, och dess DevTools-verktyg är inget undantag. Vi har gått igenom flera dolda funktioner som många användare inte känner till. Varför är dessa funktioner dolda?
Vissa funktioner är experimentella (som designläget), och Chrome-utvecklarna vill troligen inte att vanliga användare ska hitta dem av misstag. Men de flesta av dessa funktioner är dolda på grund av överväldigande informationsmängd. Med över 120 funktioner och underfunktioner, är det svårt att designa ett intuitivt gränssnitt för alla dessa möjligheter. Dessutom har Google inte alltid lyckats med användarupplevelsen.
Jag hoppas att du har hittat några användbara funktioner. Framför allt hoppas jag att den här artikeln har inspirerat dig att utforska DevTools mer på egen hand.