Med Chrome DevTools kan vi umiddelbart se effekten av endringene i koden
Chrome DevTools er en sett med nettstedsopprettings- og feilsøkingsverktøy innebygd i Google Chrome. Selvfølgelig kan vi også bruke dem i åpen kildekodeversjon; Krom.
Det er mulig å få tilgang til Chrome-verktøyene for utviklere ved å trykke på tastekombinasjonen Ctrl + Shift + I, også ved å sveve over et element og høyreklikke på Inspect.
Komponenter
Når vi åpner Chrome DevTools, ser vi at du ser utn-panelet til høyre for siden vi surfer på. Dette panelet på sin side eDen er delt inn i faner som tilsvarer hvert av verktøyene. I sin tur er verktøyene delt inn i seksjoner.
Seksjonene er:
- Elementer: Viser de forskjellige komponentene på siden.
- Konsoll: Lar deg kjøre diagnostikk under utvikling eller samhandle med Javascript-koden som du ville gjort med Linux-terminalen.
- Kilder: Gjør det enkelt å feilsøke Javascript-kode og jobbe med lokale filer.
- Nettverk: Hjelper med å overvåke og forbedre sideytelsen.
- Tidslinje: Tillater innspilling og utforsking av de forskjellige hendelsene som oppstår under besøket på et nettsted.
- Søknad: Undersøker alle ressursene som er lastet inn; blant annet IndexedDB- eller Web SQL-databaser, lokal lagring og øktlagring, informasjonskapsler, appbuffer, bilder, skrifttyper og stilark.
- Sikkerhet: Oppdager sikkerhetsproblemer i koden.
La oss se hva vi kan bruke Chrome DevTools til
Løs det som ikke fungerer
Det har skjedd med alle utviklere. Skriv koden, sjekk at det ikke er noen feil, og likevel i sannhetens øyeblikk fungerer ikke siden som den skal. Konsollverktøyet viser hvilken feil som oppstår på utførelsestidspunktet.
Reduser lastetiden
Hvis en side tar lang tid å laste inn, blir brukeren sliten og går til et annet nettsted. Heldigvis er tiden med Flash-nettsteder og deres animerte introer over. Uansett nettverk-fanen i Chrome DevTools gjør det lettere å finne ut hvilke elementer som forsinker belastningen. Vi kan gjenta testen for forskjellige tilkoblingshastigheter.
Endre koden
I Elements-fanen kan vi se elementene på en side, den relaterte html-koden og css-egenskapene. Vi kan også endre dem.
Vi kan redigere teksten på en side ved hjelp av kommandoen
document.designMode = 'on';
Prøv forskjellige skjermstørrelser
Nettbrett, smarttelefoner, smarte TV-er, stasjonære datamaskiner. Listen over enheter som vi surfer på Internett vokser med. Med Chrome DevTools kan vi test om en side ser bra ut i forskjellige størrelser.
Benchmarking
I ledelse betyr begrepet benchmarking å lære av beste praksis fra de som gjør det samme som oss. Hvis vi liker utformingen av et nettsted, kan vi med Chrome DevTolls se HTML-koden og CSS-stilarkene og kopier dem til nettstedet vårt.
Få Chrome DevTools
Chrome DevTools er tilgjengelig i nettleserne Google Chrome og Chromium. Krom er i repositoriene til de store distribusjonene. Den kan også installeres fra butikker Snap. Når det gjelder Google Chrome, kan du kom hit. i DEB- og RPM-format