Sådan bruges Chrome DevTools til fejlfinding af webstedsproblemer

Sådan bruges Chrome DevTools til fejlfinding af webstedsproblemer

Chrome DevTools er et vigtigt aktiv for udviklere. Mens andre browsere tilbyder temmelig praktiske fejlfindingsværktøjer, er Chrome DevTools din opmærksomhed værd på grund af dens multifunktionelle grænseflade og popularitet.





Chrome er den mest populære browser for udviklere på grund af sin kraftfulde pakke med fejlfindingsværktøjer. Det er let at bruge Chrome DevTools, men du skal forstå, hvordan det fungerer for at få mest muligt ud af det.



Sådan fungerer Chrome -udviklerværktøjer

Chrome DevTools lader dig løse problemer på et websted via dets fejlkonsol og andre fejlfindings- og overvågningsværktøjer. Brug af DevTools afslører frontend -smuthuller og lader dig overvåge, hvordan dit websted ser ud på mobilenheder og tablets.





Med DevTools kan du foretage redigeringer i realtid på et websteds kode, f.eks. JavaScript, HTML og CSS, og få øjeblikkelige resultater af dine ændringer.

De ændringer, du foretager via DevTools, påvirker ikke webstedet permanent. De viser kun midlertidigt det forventede resultat, som om du havde anvendt dem på den egentlige kildekode. Dette lader dig finde ud af måder at få dit websted til at indlæse meget hurtigere og gør det lettere at udrydde fejl.



Sådan får du adgang til Chrome DevTools

Du kan få adgang til Chrome DevTools på flere måder. Hvis du vil åbne udviklerværktøjerne med genvejsmetoden i Mac OS, skal du trykke på Cmd + Opt + I . Hvis du bruger Windows OS, skal du trykke på Ctrl + Shift + I tasterne på dit tastatur.

Alternativt kan du få adgang til Chrome-udviklerværktøjer ved at klikke på de tre prikker i øverste højre hjørne af skærmen. Gå til Flere værktøjer og vælg Udvikler værktøjer . En anden mulighed er at højreklikke på websiden og klikke på Inspicere mulighed.



Brug af Chrome -udviklerværktøjer til webstedsdiagnose

Chrome DevTools tilbyder flere måder at finjustere og fejlfinde en webside på. Lad os se på nogle af de måder, DevTools kan hjælpe dig med.

Se, hvordan dit websted ser ud på en smartphone

Når du har skiftet din Chrome-browser til udviklertilstand, gengiver den en halv størrelse version af din webside. Dette vil dog ikke give dig et reelt overblik over, hvordan det ville se ud på en smartphone eller tablet.



Ud over at indstille skærmstørrelsen på en webside kan Chrome DevTools heldigvis også skifte mellem forskellige mobilskærmtyper og versioner.

For at få adgang til denne mulighed skal du skifte til Inspicere mode. Klik derefter på Lydhør drop-down i øverste venstre hjørne af DevTools, og vælg din foretrukne mobilenhed. Websiden gengives og justeres derefter til størrelsen på den mobile enhed, du har valgt.

hvordan man overfører filer fra pc til pc ved hjælp af wifi windows 10

Få adgang til kildefilerne på en webside

Du kan få adgang til de filer, der udgør en webside via Chrome DevTools. For at få adgang til disse filer skal du klikke på Kilder i øverste del af DevTools -menuen. Dette afslører webstedets filsystem og giver dig også redigering.

Du kan også søge efter kildefiler, hvilket kan være nyttigt, når du har at gøre med en webside, der har mange ressourcer. Hvis du vil søge efter en kildefil via DevTools, skal du klikke på Søg mulighed lige over konsollen.

Men hvis du ikke kan finde Søg mulighed, et bedre alternativ er at bruge tastaturgenveje. I Mac OS skal du trykke på Cmd + Opt + F nøgler til at søge efter en kildefil. Hvis du bruger Windows OS, skal du trykke på Ctrl + Shift + F nøgle for at få adgang til kildefilens søgelinje.

Udfør Live -redigeringer på en webside

Et af hovedformålene med at bruge DevTools er at udføre en øjeblikkelig falsk redigering af elementerne på en webside . Når du skifter til udviklerværktøjerne, kan du redigere et websteds HTML -indhold ved at klikke på Elementer mulighed. Højreklik derefter på et hvilket som helst punkt, du vil anvende ændringer på i kodeditoren, og vælg Rediger som HTML .

Hvis du vil redigere CSS -egenskaber, der ikke er inline, skal du vælge Kilder . Vælg derefter den CSS -fil, du vil redigere. Placer markøren på din foretrukne linje i kodekonsollen for at udføre en live -redigering. Hvis du gør dette, får du øjeblikkelig feedback på eventuelle stilændringer, du anvender på websiden.

Bemærk, at når du redigerer en side via DevTools, genindlæser siden i din browser den til sin oprindelige form, og redigeringen er kun synlig for dig. Redigering via DevTools påvirker hverken problemfri drift eller brug af dette websted for andre brugere.

Debug JavaScript -kode med DevTools -konsollen

En af de bedste måder at fejlsøge JavaScript på er ved hjælp af Chromes udviklerværktøjer. Det giver dig en direkte rapport om ugyldige scripts samt fejlens nøjagtige placering.

Det er god praksis altid at holde DevTools åbent, mens du designer et websted med JavaScript. Kører f.eks console.log () kommandoen over JavaScript på et sæt instruktioner viser resultatet af den log i DevTools -konsollen, hvis programmet kører korrekt.

Som standard rapporterer konsollen eventuelle JavaScript -problemer på dit websted. Du kan finde konsollen i den nederste del af DevTools eller få adgang til den ved at klikke på Konsol indstilling øverst i vinduet Chrome DevTools.

Overvåg ressourceindlæsning fra en database

Ud over fejlfinding af JavaScript kan konsollen også give dig en detaljeret beskrivelse af ressourcer, der ikke indlæses korrekt fra webstedets database.

Selvom dette ikke altid er den bedste måde at debugge backend -problemer, fortæller det dig stadig, hvilke ressourcer der returnerer a 404 fejl efter kørsel af en database forespørgsel om disse elementer.

Relateret: Almindelige webstedsfejl og hvad de betyder

Skift orienteringen af ​​Chrome -udviklerværktøjer

For at ændre placeringen af ​​Chrome -udviklerværktøjerne skal du klikke på de tre menupunkter i DevTools (ikke den vigtigste i browseren). Vælg derefter din foretrukne position fra Dock side mulighed.

Installer Chrome DevTools -udvidelser

Du kan også installere sprog- eller rammespecifikke udvidelser, der fungerer med Chrome DevTools. Ved at installere disse udvidelser kan du fejlsøge din webside mere effektivt.

Du kan få adgang til en liste over tilgængelige udvidelser til Chrome DevTools i Chrome Udvalgte DevTools -udvidelser galleri.

Se efter sikkerhedsproblemer på et websted

Chrome DevTools lader dig vurdere, hvor sikkert dit websted er, baseret på parametre som tilgængelighed af websikkerhedscertifikater og hvor sikker forbindelsen er, blandt andre. For at kontrollere, om dit websted er sikkert, skal du klikke på Sikkerhed indstilling øverst på DevTools.

Det Sikkerhed fanen giver dig et overblik over dit websteds sikkerhedsoplysninger og fortæller dig eventuelle trusler.

Revider dit websted

Chrome DevTools har en funktion, der lader dig kontrollere den samlede ydelse af dit websted baseret på specifikke parametre.

For at få adgang til denne funktion skal du vælge Fyrtårn indstilling øverst i DevTools -vinduet. Vælg derefter de parametre, du vil kontrollere, og marker derefter enten Mobil eller Desktop muligheder for at se, hvordan din webside klarer sig på forskellige platforme.

Klik derefter på Generer rapport at køre en analyse af din webside baseret på de parametre, du valgte tidligere.

Du kan også vurdere et websteds driftstid eller indlæsningseffektivitet ved at klikke på Ydeevne mulighed. For at køre en test skal du klikke på ikonet ved siden af Klik på optageknappen mulighed for at udføre en løbetidsanalyse. Alternativt kan du klikke på genindlæsningsknappen nedenunder for at vurdere ydelsens belastningstid. Klik på Hold op for at stoppe analysatoren og vise resultaterne.

Udnyt Chrome DevTools

Afhængigt af hvad du har brug for det til, giver Chrome DevTools dig mulighed for mere end blot simpel webstedsfejlfinding. Heldigvis er DevTools nemme at bruge for programmører på alle niveauer. Du kan endda lære nogle grundlæggende principper for udvikling af webstedets frontend ved at slå kildekoden til websteder, du besøger, op.

windows 10 ingen internetadgang men tilsluttet

Du kan også opdage nogle andre muligheder, som vi ikke diskuterede i denne artikel. Så du er velkommen til at lege med de tilgængelige funktioner. Desuden skader tilpasning af disse funktioner ikke et websted lidt.

Del Del Tweet E -mail Sådan bruges Chrome OS på en Raspberry Pi

Har du ikke råd til en Chromebook? Leder du efter et alternativ til Raspbian? Sådan installeres en version af Chrome OS på din Raspberry Pi.

Læs Næste Relaterede emner
  • Internet
  • Programmering
  • HTML
  • Web-udvikling
  • JavaScript
  • Google Chrome
Om forfatteren Idisou Omisola(94 artikler udgivet)

Idowu brænder for alt smart teknologi og produktivitet. I fritiden leger han med kodning og skifter til skakbrættet, når han keder sig, men han elsker også at bryde væk fra rutinen en gang imellem. Hans passion for at vise folk vejen rundt om moderne teknologi motiverer ham til at skrive mere.

Mere fra Idowu Omisola

Abonner på vores nyhedsbrev

Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!

Klik her for at abonnere