Verktyg för webbutveckling
Webbutvecklingsverktyg (ofta kallade devtools eller inspect element ) tillåter webbutvecklare att testa och felsöka sina källkoder . De skiljer sig från webbplatsbyggare och integrerade utvecklingsmiljöer (IDE) genom att de inte hjälper till att skapa en webbsida direkt , utan snarare är de verktyg som används för att testa användargränssnittet för en webbplats eller webbapplikation .
Webbutvecklingsverktyg kommer som webbläsartillägg eller inbyggda funktioner i webbläsare . De flesta populära webbläsarna, som Google Chrome , Firefox , Internet Explorer , Safari , Microsoft Edge och Opera , har inbyggda verktyg för att hjälpa webbutvecklare, och många ytterligare tillägg kan hittas i deras respektive plugin-nedladdningscenter.
Webbutvecklingsverktyg tillåter utvecklare att arbeta med en mängd olika webbteknologier, inklusive HTML , CSS , DOM , JavaScript och andra komponenter som hanteras av webbläsaren. På grund av ökande efterfrågan från webbläsare för att göra mer, har populära webbläsare inkluderat fler funktioner anpassade för utvecklare.
Stöd för webbutvecklare
Flera anmärkningsvärda webbläsare har stöd för webbutvecklarverktyg som gör att webbdesigners och utvecklare kan titta på sammansättningen av sina sidor. Dessa är alla verktyg som är inbyggda i webbläsaren och som inte kräver ytterligare moduler eller konfiguration.
- Firefox – F12 öppnar webbkonsolen / webbläsarkonsolen (sedan Firefox 4). Webbkonsolen gäller för en enda innehållsflik; webbläsarkonsolen gäller för hela webbläsaren. Många tillägg finns också, inklusive Firebug .
- Google Chrome – Chrome Developer Tools (DevTools)
- Internet Explorer och Microsoft Edge – F12 öppnar webbutvecklarverktyg (från och med version 8)
- Opera – Opera Dragonfly
- Safari – Safaris webbutvecklingsverktyg (från och med version 3)
Mest använda funktioner
De inbyggda webbutvecklarverktygen i webbläsaren nås vanligtvis genom att du håller muspekaren över ett objekt på en webbsida och väljer "Inspektera element" eller liknande alternativ från snabbmenyn . Alternativt F12 -tangenten att vara en annan vanlig genväg.
HTML och DOM
HTML- och DOM- visare och -redigerare ingår vanligtvis i de inbyggda webbutvecklingsverktygen. Skillnaden mellan HTML- och DOM-visaren och visningskällfunktionen i webbläsare är att HTML- och DOM-visaren låter dig se DOM som den renderades förutom att du kan göra ändringar i HTML och DOM och se ändring som återspeglas på sidan efter att ändringen har gjorts.
Förutom att välja och redigera, kommer HTML-elementpanelerna vanligtvis också att visa egenskaper för DOM-objektet, såsom visningsdimension och egenskaper för Cascading-stilmall.
Firefox-versionerna 11 till 46 var utrustade med en 3D-sidinspektör med WebGL , där kapslingen av element visualiserades med lager som sticker ut från sidytan.
Webbsidor, resurser och nätverksinformation
Webbsidor laddas vanligtvis och kräver ytterligare innehåll i form av bilder, skript, teckensnitt och andra externa filer. Webbutvecklingsverktyg tillåter också utvecklare att inspektera resurser som är laddade och tillgängliga på webbsidan i en trädstrukturlista, och utseendet på stilmallar kan testas i realtid.
Webbutvecklingsverktyg gör det också möjligt för utvecklare att se information om nätverksanvändningen, som att se vad laddningstiden och bandbreddsanvändningen är och vilka HTTP-rubriker som skickas och tas emot.
Profilering och revision
Profilering tillåter utvecklare att fånga information om prestandan för en webbsida eller webbapplikation. Med denna information kan utvecklare förbättra prestandan för sina skript. Granskningsfunktioner kan ge utvecklare förslag, efter att ha analyserat en sida, för optimeringar för att minska sidladdningstiden och öka responsen. Webbutvecklingsverktyg ger vanligtvis också en registrering av den tid det tar att rendera sidan, minnesanvändning och de typer av händelser som äger rum.
Dessa funktioner tillåter utvecklare att optimera sin webbsida eller webbapplikation.
JavaScript-felsökning
JavaScript används ofta i webbläsare. Webbutvecklingsverktyg inkluderar vanligtvis en panel för att felsöka skript genom att tillåta utvecklare att lägga till bevakningsuttryck, brytpunkter, se samtalsstacken och pausa, kliva över, kliva in i och kliva ur funktioner medan de felsöker JavaScript.
En JavaScript-konsol ingår vanligtvis. Konsolerna låter utvecklare skriva in JavaScript-kommandon och anropsfunktioner, eller visa fel som kan ha påträffats under körningen av ett skript.
Tillägg och plugins
Moderna webbläsare stöder användningen av plugins eller tillägg för att lägga till eller utöka funktionalitet. Det finns många vanliga plugins som kan ge en mängd olika ytterligare funktioner.