I denne opplæringen vil du lære å kjenne Microsoft Edge Developer-verktøyene, som på mange måter ligner Google Chrome Developer-verktøyene. Du vil oppdage hvordan du kan åpne og bruke verktøyene effektivt, samt forskjellene mellom de to nettleserutviklingsverktøyene.
Viktigste funn
Edge Developer-verktøyene tilbyr en nesten identisk brukergrensesnitt som Chrome Developer-verktøyene når det gjelder grunnleggende funksjoner. Forskjellene ligger hovedsakelig i brukergrensesnittet og noen få tilleggsfunksjoner, mens kjerneverktøyene og snarveier for det meste er like.
Trinn-for-trinn-veiledning
For å åpne Edge Developer-verktøyene, har du ulike alternativer tilgjengelig. En måte er å trykke på F12. Hvis du jobber på en Mac, kan du bruke tastekombinasjonen Command + Option + I. Windows-brukere kan alternativt også bruke kombinasjonen Control + Shift + I. Hvis du vil åpne DevToolene via hurtigmenyen, høyreklikker du på nettstedets overskrift og velger "Undersøk".
Grensesnittet til Edge Developer-verktøyene vil umiddelbart virke kjent for deg hvis du allerede har jobbet med Chrome Developer-verktøyene. Fanebladene er der, ikonene ser litt annerledes ut, og de ekstra verktøyene kan nås via et "Pluss"-symbol i den øverste linjen. I Chrome var disse ekstra verktøyene tilgjengelige via hovedmenyen.
Hvis du vil legge til en ny fane i Edge Developer-verktøyene, klikker du bare på pluss-symbolet. På denne måten kan du for eksempel legge til animasjonverktøyet. Dette vil da vises øverst i fanelinjen, på samme måte som i Chrome Developer Tools.
En "Welcome"-fane er også tilgjengelig, lignende "What's New"-siden i Chrome. Her kan du få en oversikt over funksjonene i DevToolene. Jeg anbefaler deg å gå gjennom denne fanen for å eventuelt oppdage nyttige tips og triks som ikke er dekket i kurset ennå.
En annen nyttig funksjon med Edge Developer-verktøyene er muligheten til å flytte fanelinjen til venstre. Dette muliggjør en vertikal ordning av faner. Ikonene vises da som verktøytips, noe som sparer plass og gir mer plass til selve verktøyene.
Designverktøyene selv kan tilpasses via ulike innstillinger som ligner på Chrome-innstillingene. Du kan tilpasse utvidelsesmenyene, dokumentasjonen og aktivitetslinjen. På denne måten kan du beholde det velkjente arbeidsmiljøet.
En av de få forskjellene er det ekstra symbolet for Azure DevOps i Edge-verktøyene, som ikke er tilgjengelig i Chrome. Dette er spesielt nyttig for utviklere som jobber i Azure-miljøet.
Når du er i de respektive fanene, vil du legge merke til at strukturen og funksjonene i begge verktøyene nesten er identiske. Du kan bruke stiler, beregnede layouter og alt annet du er vant til i Chrome, også i Edge.
Feature-oppdateringer kan imidlertid variere noe. Hvis Chrome legger til en ny funksjon, kan det hende at denne er tilgjengelig i Edge litt senere eller omvendt. Derfor er det lurt å jevnlig sjekke hvilke nye funksjoner som legges til i de ulike verktøyene.
Dette var egentlig alt du trenger å vite om Edge Developer-verktøyene. Hvis du allerede er kjent med Chrome Developer-verktøyene, vil du raskt kunne finne deg til rette i Edge Developer-verktøyene også.
Oppsummering
I denne opplæringen har du lært om likhetene og forskjellene mellom Google Chrome og Microsoft Edge Developer-verktøyene. Du vet nå hvordan du åpner verktøyene og hvilke funksjoner du har tilgjengelig for å jobbe effektivt med dine webprosjekter.
Ofte stilte spørsmål
Hvordan åpner jeg Microsoft Edge Developer-verktøyene?Trykk F12 eller bruk kombinasjonen Control + Shift + I på Windows.
Er det store forskjeller mellom Edge og Chrome Developer-verktøyene?Forskjellene er små, hovedsakelig i brukergrensesnittet og noen ekstra funksjoner.
Kan jeg tilpasse tabben i Edge?Ja, ved å klikke på plussymbolet kan du legge til nye faner og flytte fanens linje til venstre.
Er snarveiene i Edge lignende som i Chrome?Ja, de fleste snarveiene er identiske.
Innfører Microsoft Edge også fremtidige oppdateringer?Ja, imidlertid kan funksjonene vises litt forsinket i forhold til de i Chrome.
