Med Chrome DevTools kan vi omedelbart se effekterna av ändringarna i koden
Chrome DevTools är en uppsättning verktyg för att skapa och felsöka webbplatser inbyggda i Google Chrome. Naturligtvis kan vi också använda dem i sin open source-version; Krom.
Det är möjligt att komma åt Chrome-verktygen för utvecklare genom att trycka på tangentkombinationen Ctrl + Skift + I, också genom att hålla muspekaren över ett element och högerklicka på Inspektera.
Componentes
När vi öppnar Chrome DevTools ser vi att du dyker uppn-panelen till höger om sidan vi tittar på. Denna panel för sin del eDen är uppdelad i flikar som motsvarar vart och ett av verktygen. I sin tur är verktygen uppdelade i sektioner.
Avsnitten är:
- Element: Visar de olika komponenterna på sidan.
- Konsol: Låter dig köra diagnostik under utveckling eller interagera med Javascript-koden som med Linux-terminalen.
- Källor: Gör det enkelt att felsöka Javascript-kod och arbeta med lokala filer.
- Nätverk: Hjälper till att övervaka och förbättra sidprestanda.
- Tidslinje: Tillåter inspelning och utforskning av olika händelser som inträffar under besök på en webbplats.
- Tillämpning: Undersöker alla resurser som laddas; bland annat IndexedDB- eller Web SQL-databaser, lokal lagring och sessionlagring, kakor, appcache, bilder, teckensnitt och stilark.
- Säkerhet: Upptäcker säkerhetsproblem i koden.
Låt oss se vad vi kan använda Chrome DevTools för
Åtgärda det som inte fungerar
Det har hänt alla utvecklare. Skriv koden, kontrollera att det inte finns några fel och ändå fungerar sanningen inte som den ska. Konsolverktyget visar vilket fel som inträffar vid körningstid.
Minska laddningstiden
Om det tar lång tid att ladda en sida blir användaren trött och går till en annan webbplats. Lyckligtvis är åldern på Flash-webben och dess animerade introduktioner över. Hur som helst, fliken Nätverk i Chrome DevTools gör det lättare att upptäcka vilka element som försenar belastningen. Vi kan upprepa testet för olika anslutningshastigheter.
Ändra koden
På fliken Element kan vi visa elementen på en sida, den relaterade html-koden och css-egenskaperna. Vi kan också ändra dem.
Vi kan redigera texten på en sida med kommandot
document.designMode = 'on';
Prova olika skärmstorlekar
Surfplattor, smartphones, smarta TV-apparater, stationära datorer. Listan över enheter som vi surfar på Internet växer. Med Chrome DevTools kan vi testa om en sida ser bra ut i olika storlekar.
Benchmarking
I ledningen betyder termen benchmarking att lära av de bästa metoderna för dem som gör detsamma som oss. Om vi gillar designen av en webbplats kan vi med Chrome DevTolls visa html-koden och css-formatmallen och kopiera dem till vår webbplats.
Skaffa Chrome DevTools
Chrome DevTools är tillgängligt i webbläsarna Google Chrome och Chromium. Krom finns i förvaren för de större distributionerna. Den kan också installeras från butiker snap. När det gäller Google Chrome kan du komma hit. i DEB- och RPM-format