Hvad er Chrome DevTools til?

Chrome DevTools er en sæt oprettelses- og fejlretningsværktøjer til hjemmesider indbygget i Google Chrome. Selvfølgelig kan vi også bruge dem i sin open source version Krom.

Det er muligt at få adgang til Chrome-værktøjerne for udviklere ved at trykke på tastekombinationen Ctrl + Skift + I, også ved at svæve over et element og højreklikke på Inspicer.

Komponenter

Når vi åbner Chrome DevTools, ser vi, at du visesn-panel til højre for den side, vi gennemsøger. Dette panel for sin del eDet er opdelt i faner, der svarer til hvert af værktøjerne. Til gengæld er værktøjerne opdelt i sektioner.
Sektionerne er:

• Elementer: Viser de forskellige komponenter på siden.
• Konsol: Giver dig mulighed for at køre diagnostik under udvikling eller interagere med Javascript-koden, som du ville gjort med Linux-terminalen.
• Kilder: Gør det let at debugge Javascript-kode og arbejde med lokale filer.
• Netværk: Hjælper med at overvåge og forbedre sideydelsen.
• Tidslinje: Tillader optagelse og udforskning af de forskellige begivenheder, der opstår under besøget på et websted.
• Anvendelse: Undersøger alle de ressourcer, der er indlæst; blandt andet IndexedDB- eller Web SQL-databaser, lokal lagring og sessionlagring, cookies, app-cache, billeder, skrifttyper og stilark.
• Sikkerhed: Registrerer sikkerhedsproblemer i koden.

Lad os se, hvad vi kan bruge Chrome DevTools til

Ret det, der ikke fungerer

Det er sket for enhver udvikler. Skriv koden, kontroller at der ikke er fejl, og alligevel fungerer sandheden i øjeblikket ikke som den skal. Konsolværktøjet viser, hvilken fejl der opstår på udførelsestidspunktet.

Reducer indlæsningstiden

Hvis det tager lang tid at indlæse en side, bliver brugeren træt og går til et andet websted. Heldigvis er alderen på Flash-nettet og dets animerede introduktioner forbi. Under alle omstændigheder fanen Netværk i Chrome DevTools gør det lettere at finde ud af, hvilke elementer der forsinker belastningen. Vi kan gentage testen for forskellige forbindelseshastigheder.

Rediger koden

I fanen Elementer kan vi se elementerne på en side, den relaterede html-kode og css-egenskaberne. Vi kan også ændre dem.

Vi kan redigere teksten på en side ved hjælp af kommandoen

document.designMode = 'on';

Prøv forskellige skærmstørrelser

Tabletter, smartphones, smart-tv, stationære computere. Listen over enheder, som vi surfer på Internettet med, vokser. Med Chrome DevTools kan vi test om en side ser godt ud i forskellige størrelser.

Benchmarking

I ledelsen betyder udtrykket benchmarking at lære af den bedste praksis for dem, der gør det samme som os. Med Chrome DevTolls, hvis vi kan lide designet af et websted, kan vi det se html-koden og css-stilarkene og kopier dem til vores websted.

Sådan får du Chrome DevTools

Chrome DevTools er tilgængelig i browserne Google Chrome og Chromium. Krom er i repositorierne for de store distributioner. Det kan også installeres fra butikkerne i Snap. Med hensyn til Google Chrome kan du Kom her. i DEB- og RPM-format