Edge-utvecklarverktyg du borde prova

Utvecklarverktyg i Microsoft Edge spelar en viktig roll i att skapa, felsöka och optimera moderna webbsidor och applikationer. Med införandet av Chromium-motorn har Edge utvecklats för att matcha, och i vissa avseenden till och med överträffa, alternativ som Google Chrome när det gäller avancerade funktioner, integration med Microsoft-miljöer och stöd för nya tekniker.

Om du är webbutvecklare hjälper en grundlig förståelse av de verktyg som finns tillgängliga i Edge dig inte bara att testa och lansera digitala produkter av högre kvalitet , utan förbättrar också din produktivitet och öppnar dörren för att integrera de senaste trenderna inom tillgänglighet, automatisering och progressiva webbappar, och dra nytta av de unika funktionerna i Microsoft-miljön.

Vad är Edge-utvecklingsverktyg och vad är de till för?

Utvecklingsverktygen som är integrerade i Microsoft Edge , så kallade Edge DevTools, låter dig inspektera, modifiera och felsöka källkoden för webbsidor på ett intuitivt sätt, genom att interagera i realtid med DOM, CSS, JavaScript och andra resurser.

Dessa verktyg har utformats för att göra arbetet enklare för både erfarna yrkesverksamma och utvecklare som precis har börjat i webbvärlden. Från visuell inspektion av HTML-element och deras stilar , nätverksanalys och övervakning, till avancerad resurshantering och detaljerad prestandaanalys, är Edge DevTools en komplett miljö för att optimera alla moderna webbplatser eller applikationer.

Microsoft har investerat kraftigt i tillgänglighet och personalisering , vilket gör det möjligt för användare att anpassa gränssnittet och funktionerna efter sina individuella behov och arbetsflöden. Dessutom finns det djupgående integration med andra viktiga företagsplattformar, såsom Visual Studio Code, Azure och förbättrat stöd för progressiva webbappar (PWA).

Viktiga funktioner och funktionalitet hos Edge DevTools

Edges utvecklarverktyg är grupperade i flera paneler och verktyg, som var och en specialiserar sig på ett annat område av webbutvecklingens livscykel. Låt oss bryta ner dem och upptäcka vad var och en erbjuder.

Elementinspektion och visuell redigering

Med elementpanelen kan du visa DOM-strukturen i realtid, granska och dynamiskt modifiera HTML- och CSS-taggar. Du kan:

Redigera HTML- och CSS-stilar direkt och se ändringarna direkt.
Visa beräknade stilar, ärvda regler och kaskader av CSS.
Tillämpa eller ta bort klasser, tvinga fram tillstånd (hovra, aktiv, fokus…), dölj eller markera element.
Undersök händelser som är associerade med element, ARIA-attribut och tillgänglighetsegenskaper.

Funktionerna inkluderar emulering av mobila enheter , där du kan simulera hur din sida beter sig vid olika upplösningar, densiteter och nätverksförhållanden. Dessutom finns det överlägg för att mäta marginaler, utfyllnad och de exakta måtten för varje visuell komponent.

Avancerad JavaScript-felsökning

Panelen Källor fungerar som en redigerare/felsökare för JavaScript och andra resurser. Här kan du:

Ställ in och hantera brytpunkter (brytpunkter) på specifika rader, villkorliga, i händelser, undantag eller till och med vid ändringar i DOM.
Gör en sväng-för-sväng-navigering genom koden (stepa över, stega in i, stega ut), observera anropsstacken och exekveringsflödet.
Observera och modifiera variabler i realtid, skapa bevakningsuttryck och undersök exekveringskontexten.
Filtrera bibliotekskod för att rensa spårningen och fokusera på projektets egen kod.
Sök efter uttryck eller kodrader i alla uppladdade källfiler.
Redigera, spara ändringar och testa nya implementeringar utan att ladda om sidan.

Trösta

Edge -konsolen är viktig för att visa loggar, varningar, fel och anpassade meddelanden som skickas från skript. Den låter dig:

Filtrera meddelanden efter typ (fel, varningar, loggar, information).
Kör JavaScript-kommandon i realtid, ändra sidtillstånd och testa funktioner i realtid.
Få insikt i stackspårningar, exekveringstider och andra viktiga mätvärden vid felsökning.

Nätverksövervakning och analys

Nätverkspanelen visar alla HTTP/HTTPS - förfrågningar och -svar , inklusive inläsning av resurser som bilder, skript, stilmallar etc. Här kan du:

Visa laddningstidslinjen och analysera svarstiderna.
Granska rubriker, cookies, cache och svarstexter.
Simulera långsamma anslutningar eller nätverksavbrott för att se hur de beter sig vid ett fel.
Identifiera låsta resurser, CORS-fel och säkerhetsproblem.

Prestanda- och minnesanalys

Edge DevTools erbjuder specifika verktyg för att analysera din webbplats prestanda . Det låter dig:

Spela in och visa representationen av bildrutor och animationer.
Undersök flaskhalsar vid inläsning och rendering.
Analysera minnesanvändning, läckor, referenscykler och resursoptimering.

Tillgänglighetsverktyg (A11y)

Microsoft Edge lägger stor vikt vid tillgänglighet. Dess dedikerade panel låter dig:

Visa ARIA-taggar, roller och tillgänglighetsegenskaper för varje element.
Analysera problem med kontrast, skärmläsarnavigering och kompatibilitet med hjälpmedelsteknik.
Få förslag för att förbättra upplevelsen för användare med syn-, hörsel- eller motoriska funktionsnedsättningar.

Allt detta gynnar en mer inkluderande utveckling i linje med gällande standarder.

Anpassning och tillägg

Edge DevTools innehåller avancerade anpassningsalternativ :

Du flytta verktygsfältet (upptill eller på sidan) för att anpassa den till ditt arbetsflöde.
Bestäm vilka paneler som ska visas, ordna om flikarna och lägg till nya verktyg från menyn "Fler verktyg".
Justera ditt visuella tema, hantera kortkommandon eller använd till och med samma inställningar som i Visual Studio Code.

Dessutom kan du anpassa Windows och gränssnittet för en upplevelse som är mer skräddarsydd efter dina behov.

Så här öppnar och använder du Edge DevTools: Genvägar och snabba former

I Microsoft Edge kan du öppna panelen för utvecklarverktyg på flera sätt :

Tryck på knappen F12.
Använda kombinationen Ctrl + Skift + I (Windows/Linux) eller Cmd+Alternativ+I (Mac).
Högerklicka på valfritt element och välj "Inspektera" för att öppna panelen centrerad kring det valda elementet.
Från webbläsarmenyn: Inställningar och mer (trepunktsikonen) > Fler verktyg > Utvecklarverktyg.

Kompatibilitet och skillnader mellan Edge och Chrome DevTools

Sedan bytet till Chromium-motorn delar Edge en mycket liknande grund med Chrome vad gäller utvecklingsverktyg . Edge har dock sina egna fördelar:

Gränssnittet är praktiskt taget identiskt, med samma flikar och allmän organisation.
Vissa funktioner och symboler kan variera, till exempel direkt integration med Azure DevOps, vilket är viktigt för vissa arbetsmiljöer.
Fliklayouter kan anpassas och flyttas friare i Edge, vilket ger större anpassningsmöjligheter.
Nya funktionsuppdateringar kan komma tidigare i Chrome eller Edge, beroende på utveckling.
Fliken Välkommen i Edge samlar webbläsarspecifika resurser, tips och tricks.

Automatisering, testning och avancerade verktyg för utvecklare

Edge har gjort framsteg inom automatisering och testverktyg :

DevTools-protokolletTillhandahåller ett API för programmatisk instrumentering och felsökning av webbläsaren.
Dramatiker och dockspelareEdge-kompatibla ramverk för flera webbläsare, perfekta för testning, scraping eller QA-skript.
webbdrivrutinLåter dig simulera mänskliga interaktioner för funktionell testning och integrationstestning.
webbtipsLinting-verktyg för att granska bästa praxis, vanliga fel och förslag i din kod.

Utveckling av Edge Extension

En annan fördel med Edge är hur enkelt det är att skapa anpassade tillägg :

De låter dig lägga till funktioner som förbättrar navigering, felsökning eller webbplatsanalys.
De är utvecklade med webbtekniker: HTML, CSS och JavaScript.
JSON-manifestet definierar behörigheter och beteende, logiken finns i dina egna skript.
Utvecklings- och publiceringsprocessen liknar Chrome, med integration med Microsofts ekosystem.
Användbara exempel inkluderar annonsblockerare, lösenordshanterare eller externa integrationer.

Progressiva webbappar (PWA) och WebView2: Inbyggd integration

Edge leder vägen inom stöd för progressiva webbappar (PWA) , vilket gör att webbplatser kan fungera som installerbara appar på alla operativsystem, med aviseringar, offline-funktionalitet och mer.

PWA:er kan driftsättas och köras på Edge med fullständig integration, med dedikerade verktyg för felsökning och driftsättning av dem.
Plattformsoberoende utveckling är billigare, eftersom du bara behöver bygga en gång och lansera på flera plattformar som stöds.

Å andra sidan tillåter WebView2 inbäddning av webbteknik i inbyggda Windows-applikationer , vilket förenar upplevelsen mellan webbläsare och skrivbordsapplikationer.

Tillgänglighet vid Edge: Utveckling för alla

Microsofts engagemang för tillgänglighet återspeglas i inbyggda verktyg och kontinuerliga förbättringar:

Edge har verktyg för att verifiera ARIA-taggar, roller, statusar och förbättringsförslag.
Den inkluderar automatiserad kontrastanalys, tangentbordsstöd och hjälpmedel som skärmläsare och röstnavigering.
Låter dig felsöka och åtgärda tillgänglighetsproblem inifrån DevTools.
Dokumentation och uppdateringar sker löpande, med exempel och videohandledningar.

Avancerade integrationer: Visual Studio Code, Azure och mer

I Microsoft-miljöer utmärker sig Edge för sin inbyggda integration med Visual Studio Code och Azure :

Du kan felsöka sidor och applikationer direkt från IDE:n, synkronisera ändringar och testa i realtid.
Officiella tillägg låter dig förbättra ditt arbetsflöde genom att starta integrerade projekt.
Automatisering av distribution och teamsamarbete underlättas med dessa anslutningar.

Anpassa DevTools-gränssnittet

En av de mest framstående funktionerna hos DevTools i Edge är den fullständiga anpassningen av gränssnittet , som anpassar sig till varje utvecklare:

Du kan välja vilka verktyg som visas som huvudflikar och vilka i menyn "Fler verktyg".
Ordna om flikar, flytta aktivitetsfältet, ändra panelens plats.
Välj visuella teman, justera zoomen och konfigurera genvägar för att göra din miljö bekväm och effektiv.
Spara och synkronisera dessa inställningar med ditt Microsoft-konto för att använda dem på olika enheter.

Tillgänglig hantering och genvägar i DevTools

Edge har förbättrat upplevelsen för användare som använder genvägar eller skärmläsare, vilket gör felsökning enklare:

Varje huvudåtgärd har sin egen kortkommando som kan anpassas från inställningarna.
Panelområdena (resurser, kod, verktyg, detaljer) är optimerade för navigering med tangentbord och hjälpmedelsteknik.
Du kan ändra tabbordningen och ge auditiv feedback för att göra felsökning mer tillgänglig.

Experimentella funktioner och avancerad utveckling

En funktion i Edge DevTools är att det, förutom stabila verktyg, låter dig aktivera funktioner i beta :

Experiment aktiveras från inställningarna för att testa nya funktioner.
Med Edge Canary-utgåvan får du tillgång till nya funktioner före stabila utgåvor.
Kommandomenyn gör det enkelt att snabbt komma åt funktioner och experiment utan att navigera i komplexa menyer.

Praktiska tips för att bekvämt använda Edge DevTools

För att få ut det mesta av dina vinster, överväg dessa tips:

Använd kommandomenyn (Ctrl+Skift+P) för att snabbt växla mellan paneler, köra kommandon eller aktivera funktioner.
Anpassa layouten och teman så att de passar ditt arbetsflöde, särskilt om du använder flera skärmar.
Spara och dela inställningar med ditt team genom att synkronisera med ditt Microsoft-konto.
Kolla in fliken Välkommen och den officiella dokumentationen för de senaste funktionerna och tipsen.
Integrera Edge med Android Studio i ditt arbetsflöde för att effektivisera testning och finjustering.

Microsoft Edge har befäst sin position som en kraftfull, intuitiv och tillgänglig utvecklingsmiljö, i linje med aktuella webbutvecklingstrender . Att utnyttja dessa verktyg gör en betydande skillnad i kvaliteten och hastigheten på dina digitala projekt, oavsett din erfarenhetsnivå.