Home-theater-designers
Chrome DevTools er en viktig ressurs for utviklere. Mens andre nettlesere tilbyr ganske praktiske feilsøkingsverktøy, er Chrome DevTools verdt oppmerksomheten din på grunn av det multifunksjonelle grensesnittet og populariteten.
Chrome er den mest populære nettleseren for utviklere på grunn av den kraftige pakken med feilsøkingsverktøy. Det er enkelt å bruke Chrome DevTools, men du må forstå hvordan det fungerer for å få mest mulig ut av det.
Slik fungerer utviklerverktøyene for Chrome
Chrome DevTools lar deg løse problemer på et nettsted via feilkonsollen og andre feilsøkings- og overvåkingsverktøy. Ved å bruke DevTools avsløres smutthull i frontenden og lar deg overvåke hvordan nettstedet ditt ser ut på mobilenheter og nettbrett.
Med DevTools kan du utføre sanntidsredigeringer på nettstedets kode, for eksempel JavaScript, HTML og CSS, og få øyeblikkelige resultater av endringene dine.
Endringene du gjør via DevTools påvirker ikke nettstedet permanent. De viser bare midlertidig det forventede resultatet som om du hadde brukt dem på den faktiske kildekoden. Dette lar deg finne ut måter å få nettstedet ditt til å laste mye raskere og gjør det lettere å stryke ut feil.
Slik får du tilgang til Chrome DevTools
Du kan få tilgang til Chrome DevTools på flere måter. Trykk på for å åpne utviklerverktøyene med snarveimetoden på Mac OS Cmd + Opt + I . Hvis du bruker Windows OS, trykker du på Ctrl + Shift + I tastene på tastaturet.
Alternativt kan du få tilgang til Chrome-utviklerverktøyene ved å klikke på de tre prikkene øverst til høyre på skjermen. Setter kursen mot Flere verktøy og velg Utviklerverktøy . Et annet alternativ er å høyreklikke på websiden og klikke på Undersøke alternativ.
Bruke Chrome -utviklerverktøyene for nettsteddiagnose
Chrome DevTools tilbyr flere måter å finjustere og feilsøke en webside på. La oss ta en titt på noen av måtene DevTools kan hjelpe deg.
Se hvordan nettstedet ditt ser ut på en smarttelefon
Når du bytter Chrome-nettleseren til utviklermodus, gjengis den en halvstørr versjon av nettsiden din. Imidlertid vil dette ikke gi deg en reell oversikt over hvordan det ville se ut på en smarttelefon eller nettbrett.
Heldigvis, i tillegg til å angi skjermstørrelsen på en webside, lar Chrome DevTools deg også bytte mellom forskjellige mobilskjermtyper og versjoner.
For å få tilgang til dette alternativet, slå på Undersøke modus. Klikk deretter på Mottakelig rullegardinmenyen øverst til venstre på DevTools og velg mobilenheten du foretrekker. Websiden gjengis og justeres deretter for å passe til størrelsen på den mobile enheten du valgte.
beste nettleser for Windows XP 2019
Få tilgang til kildefilene til en webside
Du kan få tilgang til filene som utgjør en webside via Chrome DevTools. For å få tilgang til disse filene, klikk på Kilder alternativet øverst på DevTools -menyen. Dette avslører filsystemet på nettstedet og gir deg også redigering.
Du kan også søke etter kildefiler, noe som kan være nyttig når du har å gjøre med en webside som har mange ressurser. For å søke etter en kildefil via DevTools, klikk på Søk alternativet like over konsollen.
Men hvis du ikke finner Søk alternativet, er et bedre alternativ å bruke hurtigtaster. I Mac OS trykker du på Cmd + Opt + F tastene for å søke etter en kildefil. Hvis du bruker Windows OS, trykker du på Ctrl + Shift + F nøkkel for å få tilgang til kildefilens søkefelt.
Utfør Live Edits på en webside
Et av hovedformålene med å bruke DevTools er å utføre en umiddelbar falsk redigering av elementene på en webside . Når du bytter til utviklerverktøyene, kan du redigere et nettsteds HTML -innhold ved å klikke på Elementer alternativ. Høyreklikk deretter på et hvilket som helst punkt du vil bruke endringer på i kodeditoren, og velg Rediger som HTML .
Hvis du vil redigere CSS -egenskaper som ikke er innebygd, velger du Kilder . Velg deretter CSS -filen du vil redigere. Plasser markøren på den valgte linjen i kodekonsollen for å utføre en live redigering. Hvis du gjør dette, får du umiddelbar tilbakemelding på alle stilendringer du bruker på nettsiden.
Vær oppmerksom på at når du redigerer en side via DevTools, setter du inn siden på nytt i nettleseren din til den opprinnelige formen, og redigeringen er bare synlig for deg. Redigering via DevTools påvirker hverken problemfri drift eller bruk av nettstedet for andre brukere.
Feilsøk JavaScript -kode med DevTools -konsollen
En av de beste måtene å feilsøke JavaScript på er å bruke Chrome utviklerverktøy. Det gir deg en direkte rapport om ugyldige skript, så vel som den nøyaktige plasseringen av feilen.
Det er god praksis å alltid holde DevTools åpent mens du designer et nettsted med JavaScript. For eksempel kjører console.log () kommandoen til JavaScript på et sett med instruksjoner viser resultatet av den loggen i DevTools -konsollen hvis programmet kjøres vellykket.
Som standard rapporterer konsollen eventuelle JavaScript -problemer på nettstedet ditt. Du finner konsollen i nedre del av DevTools eller får tilgang til den ved å klikke på Konsoll alternativet øverst i Chrome DevTools -vinduet.
Overvåke ressursinnlasting fra en database
I tillegg til å feilsøke JavaScript, kan konsollen også gi deg en detalj av ressurser som ikke lastes riktig fra nettstedets database.
Selv om dette ikke alltid er den beste måten å feilsøke backend -problemer, forteller det deg fortsatt hvilke ressurser som returnerer a 404 feil etter at du har kjørt en databasespørring av disse elementene.
Relatert: Vanlige nettstedfeil og hva de betyr
Bytt retning for utviklerverktøyene i Chrome
For å endre plasseringen til Chrome -utviklerverktøyene, klikk på de tre menypunktene i DevTools (ikke den viktigste i nettleseren). Velg deretter foretrukket posisjon fra Brygge side alternativ.
Installer Chrome DevTools -utvidelser
Du kan også installere språk eller rammespesifikke utvidelser som fungerer med Chrome DevTools. Ved å installere disse utvidelsene kan du feilsøke websiden din mer effektivt.
Du kan få tilgang til en liste over tilgjengelige utvidelser for Chrome DevTools i Chrome Utvalgte DevTools -utvidelser galleri.
Se etter sikkerhetsproblemer på et nettsted
Chrome DevTools lar deg vurdere hvor sikkert nettstedet ditt er, basert på parametere som tilgjengeligheten av websikkerhetssertifikater og hvor sikker tilkoblingen er, blant andre. For å sjekke om nettstedet ditt er sikkert, klikk på Sikkerhet alternativet øverst i DevTools.
De Sikkerhet kategorien gir deg en oversikt over nettstedets sikkerhetsdetaljer og forteller deg eventuelle trusler.
Kontroller nettstedet ditt
Chrome DevTools har en funksjon som lar deg kontrollere den generelle ytelsen til nettstedet ditt basert på spesifikke parametere.
For å få tilgang til denne funksjonen, velg fyr alternativet øverst i DevTools -vinduet. Velg deretter parameterne du vil kontrollere, og merk deretter av for Mobil eller Skrivebord alternativer for å se hvordan nettsiden din fungerer på forskjellige plattformer.
Klikk deretter på Generer rapport for å kjøre en analyse av websiden din basert på parametrene du valgte tidligere.
Du kan også vurdere kjøretiden eller lasteytelsen til et nettsted ved å klikke på Opptreden alternativ. For å kjøre en test, klikk på ikonet ved siden av Klikk på opptaksknappen muligheten til å utføre en kjøretidsanalyse. Alternativt kan du klikke på Last inn-knappen under den for å vurdere ytelsen på lastetiden. Klikk på Stoppe for å stoppe analysatoren og vise resultatene.
Dra fordel av Chrome DevTools
Avhengig av hva du trenger det til, lar Chrome DevTools deg gjøre mer enn bare enkel feilsøking av nettsteder. Heldigvis er DevTools enkle å bruke for programmerere på alle ferdighetsnivåer. Du kan til og med lære noen grunnleggende om utvikling av nettstedets frontend ved å slå opp kildekoden til nettsteder du besøker.
hvordan du logger deg av netflix
Du kan også oppdage noen andre alternativer vi ikke diskuterte i denne artikkelen. Så vær så snill å leke med de tilgjengelige funksjonene. Dessuten skader ikke tilpasning av disse funksjonene et nettsted litt.
Dele Dele kvitring E -post Slik bruker du Chrome OS på en Raspberry PiHar du ikke råd til en Chromebook? Leter du etter et alternativ til Raspbian? Slik installerer du en versjon av Chrome OS på Raspberry Pi.
Les neste Relaterte temaer- Internett
- Programmering
- HTML
- Webutvikling
- JavaScript
- Google Chrome
Idowu brenner for alt smart teknologi og produktivitet. På fritiden leker han med koding og bytter til sjakkbrettet når han kjeder seg, men han liker også å bryte fra rutinen en gang i blant. Hans lidenskap for å vise folk veien rundt moderne teknologi motiverer ham til å skrive mer.
Mer fra Idowu OmisolaAbonner på vårt nyhetsbrev
Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!
Klikk her for å abonnere