Så här använder du Chrome DevTools för att felsöka webbplatsproblem

Så här använder du Chrome DevTools för att felsöka webbplatsproblem

Chrome DevTools är en viktig tillgång för utvecklare. Medan andra webbläsare erbjuder ganska praktiska felsökningsverktyg, är Chrome DevTools värt din uppmärksamhet på grund av dess multifunktionella gränssnitt och popularitet.





Chrome är den mest populära webbläsaren för utvecklare på grund av sin kraftfulla uppsättning felsökningsverktyg. Att använda Chrome DevTools är enkelt, men du måste förstå hur det fungerar för att få ut det mesta av det.



Hur Chrome utvecklarverktyg fungerar

Med Chrome DevTools kan du lösa problem på en webbplats via felkonsolen och andra verktyg för felsökning och övervakning. Genom att använda DevTools exponeras kryphål i gränssnittet och låter dig övervaka hur din webbplats ser ut på mobila enheter och surfplattor.





Med DevTools kan du redigera i realtid på en webbplats kod, som JavaScript, HTML och CSS, och få omedelbara resultat av dina ändringar.

Ändringarna du gör via DevTools påverkar inte webbplatsen permanent. De visar bara tillfälligt det förväntade resultatet som om du hade tillämpat dem på den faktiska källkoden. Detta låter dig räkna ut sätt att få din webbplats att ladda mycket snabbare och gör det lättare att stryka bort buggar.



Så här får du tillgång till Chrome DevTools

Du kan komma åt Chrome DevTools på flera sätt. För att öppna utvecklarverktygen med genvägsmetoden i Mac OS, tryck på Cmd + Opt + I . Om du använder Windows OS, tryck på Ctrl + Skift + I tangenter på tangentbordet.

Alternativt kan du komma åt utvecklarverktygen för Chrome genom att klicka på de tre prickarna längst upp till höger på skärmen. Bege sig till Fler verktyg och välj Utvecklarverktyg . Ett annat alternativ är att högerklicka på webbsidan och klicka på Inspektera alternativ.



Använda Chrome -utvecklarverktygen för webbplatsdiagnos

Chrome DevTools erbjuder flera sätt att finjustera och felsöka en webbsida. Låt oss ta en titt på några av de sätt DevTools kan hjälpa dig.

Se hur din webbplats ser ut på en smartphone

När du väl har ställt in din webbläsare i Chrome till utvecklarläge ger den en halvstor version av din webbsida. Detta kommer dock inte att ge dig en riktig bild av hur det skulle se ut på en smartphone eller surfplatta.



Tack och lov, förutom att ställa in skärmstorleken på en webbsida, låter Chrome DevTools dig också växla mellan olika mobila skärmtyper och versioner.

För att komma åt det alternativet, växla på Inspektera läge. Klicka sedan på Mottaglig rullgardinsmenyn i det övre vänstra hörnet av DevTools och välj din mobila enhet. Webbsidan görs sedan och anpassar sig efter storleken på den mobila enhet du valt.

ska jag låta min bärbara dator vara inkopplad

Öppna källfilerna på en webbsida

Du kan komma åt filerna som utgör en webbsida via Chrome DevTools. För att komma åt dessa filer, klicka på Källor alternativet i den övre delen av DevTools -menyn. Detta avslöjar webbplatsens filsystem och ger dig också redigering.

Du kan också söka efter källfiler, vilket kan vara till hjälp när du har att göra med en webbsida som har många resurser. För att söka efter en källfil via DevTools, klicka på Sök alternativ precis ovanför konsolen.

Men om du inte hittar Sök alternativ är ett bättre alternativ att använda kortkommandon. I Mac OS, tryck på Cmd + Opt + F nycklar för att söka efter en källfil. Om du använder Windows OS, tryck på Ctrl + Skift + F för att komma åt källfilens sökfält.

Utför Live -redigeringar på en webbsida

Ett av huvudsyftena med att använda DevTools är att utföra en omedelbar falsk redigering av elementen på en webbsida . När du har bytt till utvecklarverktygen kan du redigera webbplatsens HTML -innehåll genom att klicka på Element alternativ. Högerklicka sedan på en punkt som du vill tillämpa ändringar på i kodredigeraren och välj Redigera som HTML .

Om du vill redigera CSS -egenskaper som inte är infogade väljer du Källor . Välj sedan den CSS -fil du vill redigera. Placera markören på din valda rad i kodkonsolen för att utföra en live -redigering. Genom att göra detta får du omedelbar feedback på alla stiländringar du använder på webbsidan.

Observera att när du redigerar en sida via DevTools återställer den sidan i webbläsaren till sin ursprungliga form och redigeringen är bara synlig för dig. Redigering via DevTools påverkar varken den smidiga driften eller användningen av webbplatsen för andra användare.

Debug JavaScript -kod med DevTools -konsolen

Ett av de bästa sätten att felsöka JavaScript är att använda Chromes utvecklarverktyg. Det ger dig en direktrapport om ogiltiga skript samt den exakta platsen för felet.

Det är bra att alltid hålla DevTools öppet när du skapar en webbplats med JavaScript. Till exempel kör du console.log () kommandot för JavaScript i en uppsättning instruktioner visar resultatet av den loggen i DevTools -konsolen om programmet körs framgångsrikt.

Som standard rapporterar konsolen alla JavaScript -problem på din webbplats. Du hittar konsolen i nedre delen av DevTools eller öppnar den genom att klicka på Trösta alternativet högst upp i fönstret Chrome DevTools.

Övervaka resursinläsning från en databas

Förutom att felsöka JavaScript kan konsolen också ge dig en detalj om resurser som inte laddas korrekt från webbplatsens databas.

Även om detta inte alltid är det bästa sättet att felsöka backend -problem, berättar det fortfarande vilka resurser som returnerar a 404 fel efter att ha kört en databasfråga om dessa element.

Relaterat: Vanliga webbplatsfel och vad de betyder

Byt riktning för utvecklarverktyg för Chrome

För att ändra placeringen av Chrome -utvecklarverktygen, klicka på de tre menypunkterna i DevTools (inte den huvudsakliga i webbläsaren). Välj sedan önskad position från Dock sida alternativ.

Installera Chrome DevTools -tillägg

Du kan också installera språk eller ramspecifika tillägg som fungerar med Chrome DevTools. Genom att installera dessa tillägg kan du felsöka din webbsida mer effektivt.

Du kan komma åt en lista med tillgängliga tillägg för Chrome DevTools i Chrome Utvalda DevTools -tillägg Galleri.

Sök efter säkerhetsproblem på en webbplats

Med Chrome DevTools kan du bedöma hur säker din webbplats är, baserat på parametrar som tillgänglighet av webbsäkerhetscertifikat och hur säker anslutningen är, bland andra. För att kontrollera om din webbplats är säker, klicka på säkerhet alternativet högst upp i DevTools.

De säkerhet fliken ger dig en översikt över din webbplats säkerhetsinformation och berättar eventuella hot.

Granska din webbplats

Chrome DevTools har en funktion som låter dig kontrollera den totala prestandan på din webbplats baserat på specifika parametrar.

För att komma åt den funktionen, välj Fyr alternativet högst upp i DevTools -fönstret. Välj sedan de parametrar du vill kontrollera och markera sedan antingen Mobil eller Skrivbord alternativ för att se hur din webbsida fungerar på olika plattformar.

Klicka sedan på Generera rapport för att köra en analys av din webbsida baserat på de parametrar du valde tidigare.

Du kan också bedöma körtid eller laddningsprestanda för en webbplats genom att klicka på Prestanda alternativ. För att köra ett test, klicka på ikonen bredvid Klicka på inspelningsknappen möjlighet att utföra en körtidsanalys. Alternativt kan du klicka på omladdningsknappen nedanför för att bedöma prestanda för laddningstid. Klicka på Sluta för att stoppa analysatorn och visa resultaten.

Dra fördel av Chrome DevTools

Beroende på vad du behöver det till kan du med Chrome DevTools göra mer än bara enkel webbplatsfelsökning. Tack och lov är DevTools enkla att använda för programmerare på alla färdighetsnivåer. Du kan till och med lära dig några grunderna för utveckling av webbplatsfrontend genom att leta upp källkoden för webbplatser du besöker.

hur man fixar ghost touch på iphone

Du kanske också upptäcker några andra alternativ som vi inte diskuterade i den här artikeln. Så spela gärna med de tillgängliga funktionerna. Dessutom skadar inte en webbplats lite att justera dessa funktioner.

Dela med sig Dela med sig Tweet E-post Hur man använder Chrome OS på en Raspberry Pi

Har du inte råd med en Chromebook? Letar du efter ett alternativ till Raspbian? Så här installerar du en version av Chrome OS på din Raspberry Pi.

Läs Nästa Relaterade ämnen
  • Internet
  • Programmering
  • HTML
  • Webbutveckling
  • JavaScript
  • Google Chrome
Om författaren Idisou Omisola(94 artiklar publicerade)

Idowu brinner för allt smart teknik och produktivitet. På fritiden leker han med kodning och byter till schackbrädet när han har tråkigt, men han älskar också att bryta sig från rutinen då och då. Hans passion för att visa människor vägen kring modern teknik motiverar honom att skriva mer.

Mer från Idowu Omisola

Prenumerera på vårt nyhetsbrev

Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!

Klicka här för att prenumerera