I denne vejledning vil du lære at kende Microsoft Edge Developer Tools, som på mange måder ligner Google Chrome Developer Tools. Du vil opdage, hvordan du kan åbne og effektivt bruge disse værktøjer, samt forskellene mellem de to browserudviklingsværktøjer.
Vigtigste erkendelser
Edge-DevTools tilbyder næsten en identisk brugergrænseflade som Chrome-Dev-Tools, når det kommer til de grundlæggende funktioner. Forskellene ligger primært i brugergrænsefladen og få ekstra funktioner, mens kerneværktøjerne og genvejene forbliver stort set de samme.
Trin-for-trin-vejledning
For at åbne Edge-DevTools har du forskellige muligheder. En måde er ved at trykke på F12. Hvis du arbejder på en Mac, kan du bruge tastekombinationen Command + Option + I. Windows-brugere kan alternativt bruge kombinationen Control + Shift + I. Hvis du vil åbne DevTools via kontekstmenuen, højreklikker du på hjemmesidens header og vælger "Undersøg".
Edge-DevTools' grænseflade vil straks virke genkendelig, hvis du allerede har arbejdet med Chrome-Dev-Tools. Fanebladene er der, ikonerne ser lidt anderledes ud, og de ekstra værktøjer kan nås via et "Plus"-symbol i den øverste bjælke. I Chrome blev disse ekstra værktøjer gjort tilgængelige via hovedmenuen.
Hvis du vil tilføje en ny fane i Edge-DevTools, skal du blot klikke på Plus-symbolet. På den måde kan du f.eks. tilføje animationsværktøjet. Dette vil blive vist øverst i fanelinjen, ligesom i Chrome-udviklerværktøjerne.
En "Velkommen"-fane er også tilgængelig, ligesom "Hvad er nyt"-siden i Chrome. Du kan få en oversigt over DevTools-funktionerne her. Jeg anbefaler dig at se denne fane igennem for at opdage eventuelle nyttige tip og tricks, som vi endnu ikke har dækket i kurset.
Endnu en nyttig funktion i Edge-DevTools er evnen til at flytte fanelinjen til venstre. Dette muliggør en vertikal placering af fanebladene. Ikonerne vises derefter som tooltips, hvilket sparer plads og giver mere plads til værktøjerne selv.
Designværktøjerne kan selv tilpasses via forskellige indstillinger, der ligner Chrome-indstillingerne. Du kan tilpasse de nedrulningsmenuer, dokumentationen og aktivitetslinjen. På den måde bevarer du din velkendte arbejdsplads.
En af de få forskelle er det ekstra symbol for Azure DevOps i Edge-værktøjerne, som ikke findes i Chrome. Dette er især nyttigt for udviklere, der arbejder i Azure-miljøet.
Når du navigerer i de forskellige faner, vil du opdage, at strukturen og funktionerne i begge værktøjer er næsten identiske. Du kan bruge stilarter, beregnet layout og alt andet, som du er vant til i Chrome, også i Edge.
Feature-opdateringer kan dog variere lidt. Når Chrome tilføjer en ny funktion, kan det være, at denne funktion er tilgængelig i Edge lidt senere eller omvendt. Derfor anbefales det at regelmæssigt kontrollere, hvilke nye funktioner der tilføjes til de forskellige værktøjer.
Det var faktisk alt, hvad du behøver at vide om Edge-DevTools. Hvis du allerede er fortrolig med Chrome Developer Tools, vil du også hurtigt finde dig til rette i Edge Dev Tools.
Opsummering
I denne vejledning har du lært om lighederne og forskellene mellem Google Chrome og Microsoft Edge Developer Tools. Du ved nu, hvordan du åbner værktøjerne og hvilke funktioner du har til rådighed for effektivt at arbejde med dine webprojekter.
Ofte stillede spørgsmål
Hvordan åbner jeg Microsoft Edge Developer-værktøjerne?Tryk på F12 eller brug kombinationen Control + Shift + I på Windows.
Er der store forskelle mellem Edge og Chrome Developer-værktøjerne?Forskellene er minimale, primært i brugergrænsefladen og nogle ekstra funktioner.
Kan jeg tilpasse fanen i Edge?Ja, du kan tilføje nye faner ved at klikke på plus-symbolet og flytte fanen til venstre.
Er genvejene i Edge lignende som i Chrome?Ja, de fleste genveje er identiske.
Indfører Microsoft Edge også fremtidige opdateringer?Ja, funktionerne kan dog vises lidt senere end dem i Chrome.
