Så här använder du webbläsarutvecklarverktyg

Förutom de flesta webbläsare som fokuserar på den dagliga användaren som vill surfa på webben, tillgodoses de också webbutvecklare, designers och kvalitetssäkringar som hjälper till att bygga de appar och webbplatser som dessa användare åtkomst till genom att integrera kraftfulla verktyg direkt i webbläsarna sig själva.

Borta är de dagar då de enda programmerings- och testverktygen som finns i en webbläsare gjorde det möjligt för dig att se en sidas källkod och ingenting mer. I dagens webbläsare kan du göra en djupare dyka genom att göra saker som att exekvera och felsöka JavaScript-fragment, inspektera och redigera DOM-element, övervaka realtids nätverkstrafik när din app eller sida laddas för att identifiera flaskhalsar, analysera CSS-prestanda och se till att din kod är Använd inte 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 göras i olika webbläsare såväl som på olika enheter och plattformar genom magi av lyhörd design och inbyggda simulatorer. Det bästa är att du kan göra allt detta utan att behöva lämna din webbläsare!

Tutorialsna nedan beskriver hur du får tillgång till dessa utvecklingsverktyg i flera populära webbläsare.

Google Chrome

I Chromes utvecklingsverktyg kan du redigera och felsöka kod, granska enskilda komponenter för att avslöja prestandafrågor, simulera olika enhetsskärmar, inklusive de som kör Android eller iOS, och utföra flera andra användbara funktioner.

1. Klicka på Chrome huvudmenyknapp, markerad med tre vågräta linjer och placerade i övre högra hörnet av webbläsaren.
2. När rullgardinsmenyn visas, håll muspekaren över Fler verktyg alternativ.
3. En undermeny ska nu visas. Markera alternativet märkt Utvecklarverktyg . Du kan även använda följande snabbtangent i stället för det här menyalternativet: Chrome OS / Windows ( CTRL + SKIFT + I ), Mac OS X ( ALT (OPTION) + Kommando + I )
4. Gränssnittet för Chrome Developer Tools ska nu visas, som visas i det här exemplet skärmdump. 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 utvecklingsverktygen, som typiskt finns på skärmens nedre eller högra sida, innehåller följande flikar.element: Ger möjlighet att inspektera CSS och HTML-kod samt redigera CSS on-the-fly, se effekterna av dina ändringar i realtid.Trösta: Chromes JavaScript-konsol möjliggör direkt kommandostatus samt diagnostisk felsökning.källor: Låter dig felsöka JavaScript-kod via ett kraftfullt grafiskt gränssnitt.Nätverk: Kategoriserar och visar detaljerad information om varje relaterad operation på den aktiva applikationen eller sidan, inklusive fullständig förfrågan och svarhuvuden samt avancerade tidsinställningar.tidslinje: Ger en grundlig analys av varje aktivitet som äger rum i webbläsaren så snart en begäran om en sida eller app laddas in.
5. Förutom dessa avsnitt kan du även få åtkomst till följande verktyg via >> ikonen, som ligger till höger om tidslinje flik.Profil: Delat upp i CPU-profiler och Heap profiler sektioner, ger omfattande minnesanvändning och övergripande körtid för den aktiva applikationen eller sidan.Säkerhet: Innehåller certifikatproblem och andra säkerhetsrelaterade problem med den aktiva sidan eller applikationen.Medel: Här kan du inspektera cookies, lokal lagring, appcache och andra lokala datakällor som används av den aktuella webbsidan eller applikationen.revisioner: Erbjuder sätt att optimera en sida eller programmets laddningstid och generell prestanda.
6. Enhetsläge låter dig se den aktiva sidan i en simulator som gör den nästan exakt som den skulle visas på ett av över ett dussin enheter, inklusive flera kända Android- och iOS-modeller som iPad, iPhone och Samsung Galaxy. Du får också möjlighet att emulera anpassade skärmupplösningar för att passa dina specifika utvecklings- eller testbehov. Att toggla Enhetsläge På och av, välj mobiltelefonikonet som ligger direkt till vänster om element flik.
7. Du kan också anpassa utseendet på dina utvecklarverktyg genom att först klicka på menyknappen representerad av tre vertikalt placerade prickar och längst längst till höger om de ovannämnda flikarna. Från den här rullgardinsmenyn kan du placera dockan, visa eller dölja olika verktyg samt starta mer avancerade objekt som en inspektör. Du kommer att upptäcka att dev-verktygsgränssnittet själv är mycket anpassningsbart via inställningarna som finns i det här avsnittet.

Mozilla Firefox

Firefox-avsnittet Webutvecklare innehåller verktyg för både designers, utvecklare och testare, till exempel en stilredigerare och en pixelriktad eyedropper.

Lifewire Rekommenderad läsning:Top 25 Greasemonkey och Tampermonkey User Scripts

1. Klicka på Firefox huvudmenyknapp, representerad av tre horisontella linjer och placerade i övre högra hörnet av webbläsarfönstret.
2. När rullgardinsmenyn visas väljer du ikonen märkt Utvecklare . De Webbutvecklare menyn ska nu visas med följande alternativ.Du märker att de flesta menyalternativ har kortkommandon som är associerade med dem.Växla Verktyg: Visar eller döljer gränssnittet för utvecklarverktyg, som normalt placeras längst ned i webbläsarfönstret. Tangentbordsgenväg: Mac OS X ( ALT (OPTION) + Kommando + I ), Windows ( CTRL + SKIFT + I )Inspektör: Gör att du kan inspektera och / eller anpassa CSS och HTML-kod på den aktiva sidan och på en bärbar enhet via fjärrfelsökning. Tangentbordsgenväg: Mac OS X ( ALT (OPTION) + KOMMANDO + C ), Windows ( CTRL + SKIFT + C )Webbkonsol Ger dig möjlighet att utföra JavaScript-uttryck inom den aktiva sidan samt granska en mångsidig uppsättning loggade data, inklusive säkerhetsvarningar, nätverksförfrågningar, CSS-meddelanden och mer. Tangentbordsgenväg: Mac OS X ( ALT (OPTION) + KOMMANDO + K ), Windows ( CTRL + SKIFT + K )debugger: De JavaScript Debugger låter dig hitta och fixa defekter genom att ställa in brytpunkter, inspektera DOM-noder, svarta boxnings externa källor och mycket mer. Såsom är fallet med Inspektör , den här funktionen stöder också fjärrfelsökning. Tangentbordsgenväg: Mac OS X ( ALT (OPTION) + KOMMANDO + S ), Windows ( CTRL + SKIFT + S) Style Editor: Gör att du kan skapa nya stylesheets och integrera dem med den aktiva webbsidan eller redigera befintliga ark och testa hur dina ändringar görs i en webbläsare med bara ett klick. Tangentbordsgenväg: Mac OS X, Windows ( SHIFT + F7 )Prestanda: Ger en detaljerad sammanfattning av den aktiva sidans nätverksprestanda, bildhastighetsdata, JavaScript-exekveringstid och -status, färgfärgning och mycket mer. Tangentbordsgenväg: Mac OS X, Windows ( Skift + F5 )Nätverk: Visar varje nätverksförfrågan initierad av webbläsaren tillsammans med motsvarande metod, ursprungsdomen, typ, storlek och tid som har förflutit. Tangentbordsgenväg: Mac OS X ( ALT (OPTION) + KOMMANDO + Q ), Windows ( CTRL + SKIFT + Q )Utvecklarverktygsfält: Öppnar en interaktiv kommandorad tolk. Stiga på hjälp in i tolken för en lista över alla tillgängliga kommandon och deras ordinarie syntax. Tangentbordsgenväg: Mac OS X, Windows ( SKIFT + F2 )WebIDE: Ger möjlighet att skapa och exekvera Web-appar via en verklig enhet som kör Firefox OS eller via Firefox OS Simulator. Tangentbordsgenväg: Mac OS X, Windows ( SKIFT + F8 )Browser Console: Ger samma funktionalitet som Webbkonsol (se ovan). Alla data som returneras gäller dock för hela Firefox-applikationen (inklusive tillägg och funktioner på webbläsernivå) i motsats till bara den aktiva webbsidan. Tangentbordsgenväg: Mac OS X ( SKIFT + KOMMANDO + J ), Windows ( CTRL + SKIFT + J )Responsive Design View: Ger dig möjlighet att direkt se en webbsida i olika upplösningar, layouter och skärmstorlekar för att efterlikna flera enheter, inklusive tabletter och smartphones. Tangentbordsgenväg: Mac OS X ( ALT (OPTION) + KOMMANDO + M ), Windows ( CTRL + SKIFT + M )Ögon droppar: Visar hex-färgkoden för individuellt valda pixlar.Scratchpad: Låter dig skriva, redigera, integrera och exekvera utdrag av JavaScript-kod från ett popup-Firefox-fönster. Tangentbordsgenväg: Mac OS X, Windows ( SHIFT + F4 )Sidkälla: Det ursprungliga webbläsarbaserade utvecklingsverktyget, det här alternativet visar bara den tillgängliga källkoden för den aktiva sidan. Tangentbordsgenväg: Mac OS X ( KOMMANDO + U ), Windows ( CTRL + U )Få fler verktyg: Öppnar Webbutvecklarens verktygslåda samling på Mozillas officiella tilläggswebbplats med omkring ett dussin populära tillägg som Firebug och Greasemonkey.

Microsoft Edge / Internet Explorer

Vanligen kallad F12 Utvecklarverktyg , en hyllning till tangentbordsgenväggen som har startat gränssnittet sedan tidigare versioner av Internet Explorer, dev toolset i IE11 och Microsoft Edge har kommit långt sedan starten med att erbjuda en väldigt användbar grupp av bildskärmar, debuggers, emulatorer och på -flyga kompilatörer.

1. Klicka på Fler åtgärder meny, representerad av tre prickar och placerad i övre högra hörnet av webbläsarfönstret. När rullgardinsmenyn visas väljer du alternativet märkt F12 Utvecklarverktyg . Som jag redan nämnde kan du också komma åt verktygen via F12 tangentbordsgenväg.
2. Utvecklingsgränssnittet ska nu visas, typiskt längst ner i webbläsarfönstret. Följande verktyg är tillgängliga, vilka är tillgängliga genom att klicka på respektive flikrubrik eller använda den medföljande tangentbordsgenväggen.DOM Explorer: Gör det möjligt att redigera stylesheets och HTML på den aktiva sidan, vilket ger de ändrade resultaten när du går. Använder IntelliSense-funktionalitet för att automatiskt fylla i kod, där det är tillämpligt. Tangentbordsgenväg: (CTRL + 1) Trösta: Ger möjlighet att skicka felsökningsinformation inklusive räknare, tidtagare, spår och anpassade meddelanden via ett integrerat API. Låt dig också injicera kod till en aktiv webbsida och ändra värdena som tilldelats enskilda variabler i realtid. Tangentbordsgenväg: (CTRL + 2) debugger: Låter dig ställa in brytpunkter och felsöka din kod medan den körs, linje för rad om det behövs. Tangentbordsgenväg: (CTRL + 3) Nätverk: Listar varje nätverksförfrågan initierad av webbläsaren under sidbelastning och körning inklusive protokolldetaljer, innehållstyp, bandbreddsanvändning och mycket mer. Tangentbordsgenväg: (CTRL + 4) Prestanda: Detaljerad bildhastighet, CPU-utnyttjande och andra prestationsrelaterade mätvärden som hjälper dig att påskynda sidladdningstider och andra aktiviteter. Tangentbordsgenväg: (CTRL + 5) Minne: 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 tidsintervaller. Tangentbordsgenväg: (CTRL + 6) Tävlan: Visar hur den aktiva sidan skulle göras i olika upplösningar och skärmstorlekar, emulerar smartphones, tabletter och andra enheter. Ger också möjlighet att ändra användaragent och sidorientering, samt simulera olika geolokationer genom att ange en latitud och longitud. Tangentbordsgenväg: (CTRL + 7)
3. För att visa Trösta medan i någon av de andra verktygen klickar du på fyrkantsknappen med en höger konsol inuti den, placerad i det övre högra hörnet av utvecklingsverktyget.
4. För att undocka verktyget gränssnitt för utvecklare så att det blir ett separat fönster, klicka på knappen representerad av två kaskad rektanglar eller använd följande tangentbordsgenväg: CTRL + P . Du kan placera verktygen tillbaka i deras ursprungliga läge genom att trycka på CTRL + P en andra gång.

Apple Safari (endast OS X)

Safaris olika dev-verktygsserie återspeglar den stora utvecklingssamhället som använder en Mac för deras design och programmeringsbehov. Förutom en kraftfull konsol och traditionella loggnings- och felsökningsfunktioner tillhandahålls också ett lättanvänt och responsivt designläge och ett verktyg för att skapa egna webbläsare.

1. Klicka på Safari i webbläsarmenyn, högst upp på skärmen. När rullgardinsmenyn visas väljer du Inställningar . Du kan även använda följande snabbtangent i stället för det här menyalternativet: KOMMANDO + KOMMA (,)
2. Safaris Inställningar gränssnittet ska nu visas, överlagrar ditt webbläsarfönster. Klicka på Avancerad ikonen, som ligger längst till höger om huvudet.
3. De Avancerad preferenser ska nu vara synliga. Nederst på den här skärmen finns ett alternativ som är märkt Visa utveckla menyn i menyraden , tillsammans med en kryssruta. Om det inte finns något kryssmarkerat i rutan, klicka på det en gång för att placera en där.
4. Stäng Inställningar gränssnitt genom att klicka på den röda "x" som finns i övre vänstra hörnet.
5. Du bör nu märka ett nytt alternativ i navigeringsmenyn som heter Utveckla , belägen mellan bokmärken och Fönster . Klicka på det här menyalternativet. En rullgardinsmeny ska nu visas med följande alternativ.Öppna sidan med: Låter dig öppna den aktiva webbsidan i en av de andra webbläsarna som för tillfället installeras på din Mac.Användaragent: Låter dig välja mellan över ett dussin fördefinierade användaragentvärden inklusive flera versioner av Chrome, Firefox och Internet Explorer, samt definiera din egen anpassade sträng.Ange Responsive Design Mode: Gör den aktuella sidan som den skulle visas på olika enheter och vid olika skärmupplösningar.Visa webbinspektör: Startar huvudgränssnittet för Safaris dev-verktyg, som normalt placeras längst ner på din webbläsars skärm och innehåller följande avsnitt: element , Nätverk , Medel , Tidslinjer , debugger , Lagring , Trösta .Visa felkonsol: Lanserar också dev-verktygsgränssnittet, direkt till Trösta fliken som visar fel, varningar och annan sökbar loggdata.Visa sidokälla: Öppnar Medel fliken, som visar källkoden för den aktiva sidan som kategoriseras enligt dokument.Visa sidresurser: Utför samma funktion som Visa sidkälla alternativ.Visa redigeringsredigerare: Öppnar ett nytt fönster där du kan ange CSS och HTML-kod och förhandsgranska dess utgående kapacitet.Visa Extension Builder: Ger möjlighet att skapa eller redigera Safari-tillägg med CSS, HTML och JavaScript.Visa tidslinjeinspelning: Öppnar Tidslinjer fliken och börjar visa nätverksförfrågningar, layout och rendering av information samt JavaScript-körning i realtid.Tomma kakor: Tar bort hela cacheminnet som för tillfället lagras på hårddisken.Inaktivera Caches: Stoppar Safari från caching så att allt innehåll hämtas från servern när varje sida laddas.Inaktivera bilder: Förhindrar att bilder visas 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örhindrar att alla installerade tillägg körs i webbläsaren.Inaktivera sajtspecifika hackar: Om Safari har ändrats för att uttryckligen hantera problem som är specifika för den aktiva webbsidan, blockerar det här alternativet dessa ändringar så att sidan laddas som den skulle ha innan dessa ändringar infördes.Inaktivera lokala filbegränsningar: Tillåter att webbläsaren har tillgång till filer på dina lokala diskar, en åtgärd som är begränsad som standard av säkerhetsskäl.Inaktivera gränsöverskridande begränsningar: Dessa begränsningar införs som standard för att förhindra XSS och andra potentiella faror. Dock måste de ofta vara tillfälligt inaktiverade för utvecklingsändamål.Tillåt JavaScript från Smart Search Field: När den är aktiverad kan du ange webbadresser med javascript: inkorporerade direkt i adressfältet.Behandla SHA-1-certifikat som osäkra: SSL-certifikat med SHA-1-algoritmen anses allmänt vara omoderna och sårbara.