Hvordan åpne Google Chrome Developer Tools?

Google Chrome Developer Tools er en flott funksjon av Google Chrome for webutviklere. Det er et sett med verktøy som er direkte innebygd til Google Chrome for å hjelpe utviklerne med å gjøre endringer på websiden og diagnostisere problemer med nettstedene sine på farten. Det hjelper nettutviklere med å bygge og optimalisere nettsteder raskere.

I denne artikkelen skal jeg vise deg hvordan du åpner Google Chrome Developer Tools i Google Chrome og noen av funksjonene den tilbyr.

Innholdsfortegnelse:

1. Åpne Google Chrome Developer Tools
2. Docking Google Chrome Developer Tools på forskjellige steder
3. Noen av funksjonene i Google Chrome Developer Tools
4. Lukke utviklerverktøy i Google Chrome
5. Konklusjon
6. Referanser

Åpne Google Chrome Developer Tools

En måte å åpne Google Chrome Developer Tools er fra Google Chrome.

Åpne først Google Chrome og klikk på > Flere verktøy> Utviklerverktøy Fra øverste høyre hjørne av Google Chrome.

Google Chrome Developer Tools skal vises.

Du kan også besøke et nettsted fra Google Chrome og inspisere et element fra nettstedet for å åpne utviklerverktøyene.

For å inspisere et element fra en webside, høyreklikk (RMB) på det og klikk på Undersøke.

Du kan også trykke på + + C For å inspisere et element fra en webside og åpne Google Chrome Developer Tools.

Google Chrome Developer Tools skal åpnes.

På samme måte kan du åpne konsollen til Google Chrome Developer Tools ved å trykke + + J.

Docking Google Chrome Developer Tools på forskjellige steder

Hvis du ikke har en stor nok skjerm, vil du kanskje ikke at Google Chrome -utviklerverktøyene skal forankres på høyre side av Google Chrome.

Klikk på og velg en dokkingsposisjon fra Dock Side Seksjon for å endre dokkingsposisjonen til Google Chrome.

Undock Google Chrome Developer Tools i et eget vindu.

Dock Google Chrome Developer Tools til venstre.

Dock Google Chrome Developer Tools to the Bottom.

Dock Google Chrome Developer Tools til høyre.

Noen av funksjonene i Google Chrome Developer Tools

Google Chrome Developer Tools har noen faner, og du kan gjøre spesifikke ting fra hver av fanene.

Fra Elementer Tab, du kan inspisere forskjellige elementer fra websiden; Sjekk CSS -stilene og beregnet størrelse på elementene; Gjør øyeblikkelig endringer i HTML DOM og CSS på nettsiden og se resultatene; og mange flere.

Fra Konsoll Tab, du kan se loggmeldinger og kjøre JavaScript -koder.

Fra Kilder Fanen, du kan feilsøke JavaScript -koder, lagre og kjøre JavaScript -kodebiter, vedvarer endringer gjort til Google Chrome Developer Tools på tvers av sidelasting, og lagre endringene du har gjort ved hjelp av Google Chrome Developer Tools til disken.

Fra Nettverk Tab, du kan overvåke nettverksaktivitet, filer som er bedt om av websiden og tiden det tar å laste inn, og feilsøke nettverksaktiviteten til nettsiden.

Fra Opptreden Tab, du kan registrere sidelastningstid og nettstedytelse. Du kan også finne måter å forbedre dem på.

Fra Hukommelse Tab, du kan overvåke minnebruken av nettstedet ditt og fikse uvanlige minneproblemer.

Fra applikasjon Tab, du kan inspisere alle de lastede ressursene på nettstedet ditt, for eksempel:

• Indeksertdb
• Web SQL -databaser
• Lokal lagring
• Øktlagring
• Informasjonskapsler
• Applikasjonsbuffer
• Bilder
• Skrifter
• Stilark

Fra Sikkerhet Tab, du kan feilsøke sertifiseringsproblemer, problemer med blandet innhold og mange andre sikkerhetsproblemer på nettstedet.

Fra fyr Tab, du kan generere en fyrtårnrapport.

Fra Opptaker Tab, du kan måle ytelsen over hele brukerflyt av nettstedet.

Fra Ytelsesinnsikt Tab, du kan få handlingsrike ytelsesinnsikt på nettstedet ditt.

Du kan se hvordan nettstedet ditt ser ut på enheter av forskjellige skjermstørrelser ved å bruke Enhetsmodus av Google Chrome Developer Tools.

Å bytte til Enhetsmodus, Klikk på vippeknappen.

Nettstedet ditt skal vises i forskjellige skjermstørrelser i enhetsmodus. Du kan endre skjermstørrelsen og se hvordan nettstedet vil se ut på enheter med den skjermstørrelsen.

Lukke utviklerverktøy i Google Chrome

For å lukke Google Chrome Developer -verktøyene, klikker du på X.

Google Chrome Developer Tools skal være stengt.

Konklusjon

Jeg har vist deg hvordan du åpner Google Chrome Developer Tools og diskutert noen av funksjonene i Google Chrome Developer Tools. Hvis du vil lære mer om Google Chrome Developer Tools og hver av funksjonene, kan du sjekke lenkene i Reference -delen nedenfor.

Referanser:

1. Oversikt - Chrome -utviklere
2. Registrer, replay og måle brukerstrømmer - Chrome -utviklere
3. Performance Insights: Få handlingsdyktige innsikter på nettstedets ytelse - Chrome Developers