Hur man använder verktyg för webbläsarutvecklare

2024 Författare: Abigail Brown | [email protected]. Senast ändrad: 2023-12-17 07:02

Förutom att de flesta webbläsartillverkare fokuserar på den vanliga användaren som vill surfa på webben, vänder de sig även till webbutvecklare, designers och kvalitetssäkringspersonal som hjälper till att bygga appar och webbplatser som dessa användare använder genom att integrera kraftfulla verktyg direkt in i webbläsarna.

Dagarna är borta då de enda programmerings- och testverktygen som finns i en webbläsare tillät dig att se en sidas källkod och inget mer. Dagens webbläsare låter dig ta en mycket djupare dykning genom att göra saker som att köra och felsöka JavaScript-kodavsnitt, inspektera och redigera DOM-element, övervaka nätverkstrafik i re altid när din app eller sida laddas för att identifiera flaskhalsar, analysera CSS-prestanda, se till att din kod är att inte använda för mycket minne eller för många CPU-cykler, och mycket mer.

Ur ett testperspektiv kan du reproducera hur en app eller webbsida kommer att renderas i olika webbläsare såväl som på olika enheter och plattformar genom magin med responsiv design och inbyggda simulatorer. Det bästa är att du kan göra allt detta utan att behöva lämna din webbläsare!

Handledningarna nedan visar hur du kommer åt dessa utvecklarverktyg i flera populära webbläsare.

Google Chrome

Utvecklarverktygen för Chrome låter dig redigera och felsöka kod, granska enskilda komponenter för att avslöja prestandaproblem, simulera olika enhetsskärmar inklusive de som kör Android eller iOS, och utföra flera andra användbara funktioner.

1. Välj Chromes huvudmeny, markerad med tre horisontella linjer och placerad i webbläsarens övre högra hörn.

2. När rullgardinsmenyn visas håller du muspekaren över alternativet Fler verktyg.

   

3. En undermeny bör nu visas. Välj alternativet märkt Utvecklarverktyg. Du kan också använda följande kortkommando i stället för det här meny alternativet: Chrome OS/Windows (CTRL+SHIFT+I), Mac OS X (ALT(OPTION) +KOMMANDO+I)

   

4. Gränssnittet för Chrome Developer Tools bör nu visas, som visas i den här skärmdumpen. Beroende på din version av Chrome kan den ursprungliga layouten som du ser vara något annorlunda än den som presenteras här. Huvudnavet för utvecklarverktygen, vanligtvis placerad antingen längst ned eller till höger på skärmen, innehåller följande flikar.

5. Utöver dessa avsnitt kan du också komma åt följande verktyg via ikonen >>, som finns till höger om Performance tab.

   • Memory: Övervaka och registrera minnesanvändning på en webbsida. Du kan se hur tungt JavaScript på din webbplats är.
   • Security: Belyser certifikatproblem och andra säkerhetsrelaterade problem med den aktiva sidan eller applikationen.
   • Application: Inspektera resurserna som används av en webbapplikation. Få en fullständig översikt över vad som används.
   • Audits: Erbjuder sätt att optimera en sidas eller applikations laddningstid och allmänna prestanda.

   

6. Device Mode låter dig se den aktiva sidan i en simulator som återger den nästan exakt som den skulle se ut på en av över ett dussin enheter, inklusive flera välkända Android och iOS-modeller som iPad, iPhone och Samsung Galaxy. Du får också möjligheten att emulera anpassade skärmupplösningar för att passa just dina utvecklings- eller testbehov.

   För att växla Device Mode på och av, välj mobiltelefonikonen direkt till vänster om Elements tab.

   

7. Du kan också anpassa utseendet och känslan för dina utvecklarverktyg genom att först välja menyknappen representerad av tre vertik alt placerade prickar och placerad längst till höger om ovannämnda flikar.

   Från den här rullgardinsmenyn kan du flytta om bryggan, visa eller dölja olika verktyg samt starta mer avancerade objekt som en enhetsinspektör. Du kommer att upptäcka att själva gränssnittet för utvecklarverktygen är mycket anpassningsbart via inställningarna i det här avsnittet.

   

Mozilla Firefox

Firefox webbutvecklarsektion innehåller verktyg för både designers, utvecklare och testare, såsom en stilredigerare och pixelinriktad pipett.

1. Välj Firefoxs huvudmeny, representerad av tre horisontella linjer och placerad i det övre högra hörnet av webbläsarfönstret.

2. När rullgardinsmenyn visas, välj Web Developer.

   

3. Web Developer-menyn ska nu visas, med följande alternativ. Du kommer att märka att de flesta meny alternativ har kortkommandon kopplade till dem.

   • Toggle Tools: Visar eller döljer gränssnittet för utvecklarverktygen, vanligtvis placerat längst ned i webbläsarfönstret. Kortkommando: Mac OS X (ALT(OPTION)+COMMAND+I), Windows (CTRL+SHIFT+I)
   • Inspector: Låter dig inspektera och/eller justera CSS- och HTML-kod på den aktiva sidan såväl som på en bärbar enhet via fjärrfelsökning. Kortkommando: Mac OS X (ALT(OPTION)+COMMAND+C), Windows (CTRL+SHIFT+C)
   • Web Console: Låter dig köra JavaScript-uttryck på den aktiva sidan samt granska en mängd olika loggade data inklusive säkerhetsvarningar, nätverksförfrågningar, CSS-meddelanden och mer. Tangentbordsgenväg: Mac OS X (ALT(OPTION)+COMMAND+K), Windows (CTRL+SHIFT+K)
   • Debugger: JavaScript Debugger låter dig lokalisera och fixa defekter genom att ställa in brytpunkter, inspektera DOM-noder, svartboxa externa källor och mycket mer. Som är fallet med Inspector stöder den här funktionen även fjärrfelsökning. Kortkommando: Mac OS X (ALT(OPTION)+COMMAND+S), Windows (CTRL+SHIFT+S)
   • Style Editor: Låter dig skapa nya stilmallar och integrera dem med den aktiva webbsidan, eller redigera befintliga ark och testa hur dina ändringar återges i en webbläsare med bara ett klick. Kortkommando: Mac OS X, Windows (SHIFT+F7)
   • Prestanda: Ger en detaljerad uppdelning av den aktiva sidans nätverksprestanda, bildhastighetsdata, JavaScript-körningstid och tillstånd, färgblinkande och mycket mer. Kortkommando: Mac OS X, Windows (SHIFT+F5)
   • Network: Listar varje nätverksbegäran som initierats av webbläsaren tillsammans med motsvarande metod, ursprungsdomän, typ, storlek och förfluten tid. Kortkommando: Mac OS X (ALT(OPTION)+COMMAND+Q), Windows (CTRL+SHIFT+Q)
   • Storage Inspector: Ta en titt på cachen och cookies som lagras av en webbplats. Kortkommando: (SHIFT+F9)
   • Utvecklarverktygsfält: Öppnar en interaktiv kommandoradstolk. Ange help i tolken för en lista över alla tillgängliga kommandon och deras korrekta syntax. Kortkommando: Mac OS X, Windows (SHIFT+F2)
   • WebIDE: Ger möjlighet att skapa och köra webbappar via en faktisk enhet som kör Firefox OS eller via Firefox OS Simulator. Kortkommando: Mac OS X, Windows (SHIFT+F8)
   • Webbläsarkonsol: Ger samma funktionalitet som webbkonsolen (se ovan). Men all data som returneras är för hela Firefox-applikationen (inklusive tillägg och funktioner på webbläsarnivå) i motsats till bara den aktiva webbsidan. Kortkommando: Mac OS X (SHIFT+COMMAND+J), Windows (CTRL+SHIFT+J)
   • Responsiv designvy: Låter dig omedelbart visa en webbsida i olika upplösningar, layouter och skärmstorlekar för att efterlikna flera enheter inklusive surfplattor och smartphones. Kortkommando: Mac OS X (ALT(OPTION)+COMMAND+M), Windows (CTRL+SHIFT+M)
   • Eyedropper: Visar hex-färgkoden för individuellt valda pixlar.
   • Scratchpad: Scratchpad låter dig skriva, redigera, integrera och köra utdrag av JavaScript-kod från ett Firefox-fönster som öppnas. Öppna ett interaktivt JavaScript-dokument som låter dig skriva in kod och testa det mot en webbplats. Kortkommando: (SHIFT+F4)
   • Service Workers: Felsök servicearbetare i din webbapplikation. Få detaljerad information om deras prestanda och fel.
   • Sidkälla: Det ursprungliga webbläsarbaserade utvecklarverktyget, det här alternativet visar helt enkelt den tillgängliga källkoden för den aktiva sidan. Kortkommando: Mac OS X (COMMAND+U), Windows (CTRL+U)
   • Hämta fler verktyg: Öppnar Web Developer's Toolbox samlingen på Mozillas officiella tilläggswebbplats, med ett dussintal populära tillägg som t.ex. som Firebug och Greasemonkey.

   

Microsoft Edge/Internet Explorer

Benämns vanligen F12 Developer Tools, en hyllning till kortkommandot som har lanserat gränssnittet sedan tidigare versioner av Internet Explorer, utvecklingsverktygsuppsättningen i IE11 och Microsoft Edge har kommit en lång väg sedan starten genom att erbjuda en mycket praktisk grupp av monitorer, felsökningsverktyg, emulatorer och kompilatorer i farten.

Microsoft stöder inte längre Internet Explorer och rekommenderar att du uppdaterar till den nyare Edge-webbläsaren. Gå till deras webbplats för att ladda ner den senaste versionen.

1. Välj Fler åtgärder, representerat av three dots och finns i det övre högra hörnet av webbläsarfönstret.

   

2. När rullgardinsmenyn visas, välj alternativet märkt Utvecklarverktyg.

   

3. Utvecklingsgränssnittet bör nu visas, vanligtvis längst ned i webbläsarfönstret. Följande verktyg är tillgängliga, alla tillgängliga genom att klicka på respektive flikrubrik eller använda medföljande kortkommando.

   

   • DOM Explorer: Låter dig redigera stilmallar och HTML på den aktiva sidan, vilket renderar de ändrade resultaten allt eftersom. Använder IntelliSense-funktioner för att autokomplettera kod där det är tillämpligt. Kortkommando: (CTRL+1)
   • Console: Ger möjlighet att skicka felsökningsinformation inklusive räknare, timer, spår och anpassade meddelanden via ett integrerat API. Låter dig också injicera kod i en aktiv webbsida och ändra värdena som tilldelats enskilda variabler i re altid. Kortkommando: (CTRL+2)
   • Debugger: Låter dig ställa in brytpunkter och felsöka din kod medan den körs, rad för rad om det behövs. Kortkommando: (CTRL+3)
   • Network: Listar varje nätverksbegäran som initieras av webbläsaren under sidladdning och exekvering, inklusive protokolldetaljer, innehållstyp, bandbreddsanvändning och mycket mer. Kortkommando: (CTRL+4)
   • Prestanda: Detaljerad bildhastighet, CPU-användning och andra prestandarelaterade mätvärden för att hjälpa dig att snabba upp sidladdningstider och andra aktiviteter. Kortkommando: (CTRL+5)
   • Memory: Hjälper dig att isolera och korrigera potentiella minnesläckor på den aktuella webbsidan genom att visa en tidslinje för minnesanvändning tillsammans med ögonblicksbilder från olika tidsintervall. Kortkommando: (CTRL+6)
   • Emulation: Visar dig hur den aktiva sidan skulle renderas i olika upplösningar och skärmstorlekar, som emulerar smartphones, surfplattor och andra enheter. Det ger också möjlighet att ändra användaragenten och sidans orientering, samt simulera olika geolokaliseringar genom att ange en latitud och longitud. Kortkommando: (CTRL+7)

4. För att visa Console i något av de andra verktygen, tryck på fyrkantsknappen med en höger parentes inuti den, placerad i det övre högra hörnet av utvecklingsverktygens gränssnitt.

   

5. För att lossa gränssnittet för utvecklarverktygen så att det blir ett separat fönster, välj två överlappande rektanglar eller använd följande kortkommando: CTRL+P. Du kan placera tillbaka verktygen på deras ursprungliga plats genom att trycka på CTRL+P en andra gång.

   

Apple Safari (endast Mac)

Safaris mångsidiga utvecklingsverktygsuppsättning återspeglar den stora utvecklargemenskapen som använder en Mac för sina design- och programmeringsbehov. Förutom en kraftfull konsol och traditionella loggnings- och felsökningsfunktioner finns också ett lättanvänt responsivt designläge och ett verktyg för att skapa dina egna webbläsartillägg.

1. Välj Safari i webbläsarmenyn högst upp på skärmen. När rullgardinsmenyn visas väljer du Preferences. Du kan också använda följande kortkommando i stället för detta meny alternativ: COMMAND+COMMA(,)

   

2. Safaris Preferences-gränssnitt bör nu visas och överlagra ditt webbläsarfönster. Välj Advanced icon, som finns längst till höger i rubriken.

   

3. Inställningarna Advanced bör nu vara synliga. Längst ner på den här skärmen finns ett alternativ märkt Visa utvecklingsmeny i menyraden, tillsammans med en kryssruta. Om det inte visas någon bock i rutan, klicka på den en gång för att placera en där.

   

4. Stäng Preferences-gränssnittet.

5. Du bör nu lägga märke till ett nytt alternativ i webbläsarmenyn som heter Develop, som ligger mellan Bokmärken och Window. Klicka på detta meny alternativ. En rullgardinsmeny ska nu visas som innehåller följande alternativ.

   • Öppna sida med: Låter dig öppna den aktiva webbsidan i en av de andra webbläsarna som för närvarande är installerade på din Mac.
   • User Agent: Låter dig välja bland över ett dussin fördefinierade användaragentvärden inklusive flera versioner av Chrome, Firefox och Internet Explorer, samt definiera din egen anpassade sträng.
   • Gå till responsivt designläge: Återger den aktuella sidan som den skulle se ut på olika enheter och med olika skärmupplösningar.
   • Show Web Inspector: Startar huvudgränssnittet för Safaris utvecklingsverktyg, vanligtvis placerat längst ner på webbläsarskärmen och innehåller följande avsnitt: Elements, Network, Resources, Timelines, Debugger, Storage, Console.
   • Show Error Console: Startar också gränssnittet för utvecklarverktygen, direkt till Konsolfliken som visar fel, varningar och annat sökbart loggdata.
   • Visa sidkälla: Öppnar fliken Resurser, som visar källkoden för den aktiva sidan som kategoriseras av dokumentet.
   • Visa sidresurser: Utför samma funktion som alternativet Visa sidkälla.
   • Show Snippet Editor: Öppnar ett nytt fönster där du kan ange CSS- och HTML-kod och förhandsgranska dess utdata i farten.
   • Show Extension Builder: Ger möjlighet att skapa eller redigera Safari-tillägg med CSS, HTML och JavaScript.
   • Visa tidslinjeinspelning: Öppnar fliken Tidslinjer och börjar visa nätverksförfrågningar, layout och renderingsinformation samt JavaScript-körning i re altid.
   • Empty Caches: Raderar hela cachen som för närvarande lagras på din hårddisk.
   • Inaktivera cacher: Stoppar Safari från att cachelagras så att allt innehåll hämtas från servern vid varje sidladdning.
   • Inaktivera bilder: Förhindrar att bilder renderas på alla webbsidor.
   • Inaktivera stilar: Ignorerar CSS-egenskaper när en sida laddas.
   • Inaktivera JavaScript: Begränsar JavaScript-körning på alla sidor.
   • Inaktivera tillägg: Förbjuder alla installerade tillägg från att köras i webbläsaren.
   • Inaktivera webbplatsspecifika hacks: Om Safari har modifierats för att explicit hantera problem som är specifika för den aktiva webbsidan, kommer detta alternativ att blockera dessa ändringar så att sidan laddas som det skulle ha gjort innan dessa ändringar infördes.
   • Inaktivera lokala filbegränsningar: Ger webbläsaren åtkomst till filer på dina lokala diskar, en åtgärd som är begränsad som standard av säkerhetsskäl.
   • Inaktivera Cross-Origin Restrictions: Dessa begränsningar har införts som standard för att förhindra XSS och andra potentiella faror. De måste dock ofta inaktiveras tillfälligt för utvecklingsändamål.
   • Tillåt JavaScript från smart sökfält: När det är aktiverat ger det möjlighet att ange webbadresser med javascript: inkorporerat direkt i adressfältet.
   • Behandla SHA-1-certifikat som osäkra: SSL-certifikat som använder SHA-1-algoritmen anses allmänt vara inaktuella och sårbara.