Edge Browser: Mobilvisning og Emulering

Sådan bruges mobilbrowser-emulator i Microsoft Edge

I en verden, hvor mobilbrug af internettet dominerer, er det essentielt for webudviklere og designere at kunne se, hvordan deres websteder ser ud og fungerer på forskellige mobile enheder. Microsoft Edge, især den nyere Chromium-baserede version, tilbyder kraftfulde værktøjer til netop dette. Denne artikel vil guide dig trin for trin gennem processen med at aktivere og bruge mobilvisning og enhedsemulering i Microsoft Edge.

Aktivering af Mobilvisning i Microsoft Edge

At se et websted i mobilvisning på din computer via Microsoft Edge er en simpel proces. Dette er utroligt nyttigt, når du vil tjekke, hvordan dit eget websted ser ud på en smartphone, eller når du skal tilgå en mobiloptimeret version af en side, som du normalt kun ville se på din telefon. Her er, hvordan du gør:

1. Start Microsoft Edge: Åbn browseren på din computer.
2. Besøg dit ønskede websted: Naviger til den URL, du vil inspicere.
3. Åbn Udviklerværktøjer: Der er flere måder at gøre dette på:
   • Klik på menuikonet (de tre prikker øverst til højre) og vælg "Flere værktøjer" (More Tools), derefter "Udviklerværktøjer" (Developer Tools).
   • Du kan også bruge tastaturgenvejen F12.
4. Find Emuleringsværktøjet: Når Udviklerværktøjer er åbnet, skal du kigge efter et ikon, der ligner en mobiltelefon og en tablet. Dette kaldes ofte "Enhedsværktøjslinje" (Device Toolbar) eller lignende. Klik på dette ikon for at aktivere det.

Når Enhedsværktøjslinjen er aktiveret, vil browserens visning ændre sig til at ligne en mobilskærm. Du kan derefter vælge forskellige mobile enheder fra en dropdown-menu for at simulere forskellige skærmstørrelser, opløsninger og brugeragenter.

Ændring af Emuleringstilstand i Edge

Microsoft Edge giver dig mulighed for at tilpasse emuleringstilstanden yderligere for at opnå en mere præcis simulering. Dette kan være afgørende for at teste specifikke scenarier, som f.eks. hvordan et websted reagerer på forskellige enhedstyper eller browserversioner.

Når du har åbnet Udviklerværktøjer og Enhedsværktøjslinjen:

• Dokumenttilstand (Document Mode): I nogle versioner af Edge kan du finde en "Dokumenttilstand". Sørg for, at denne er indstillet til "Edge (Standard)" for at simulere den mest aktuelle Edge-oplevelse.
• Brugeragentstreng (User Agent String): Dette er en streng, der identificerer din browser over for webserveren. Ved at ændre denne kan du få webstedet til at tro, at du bruger en specifik enhed eller browserversion. Vælg en passende brugeragent fra listen, eller indtast en brugerdefineret streng, hvis du har brug for en specifik simulering.
• Gem Indstillinger for Emulering: For at dine emuleringsindstillinger skal forblive aktive, selv efter du lukker og genåbner Udviklerværktøjer eller genindlæser siden, kan du ofte finde en funktion kaldet "Persist Emulation Settings" eller "Bevar Emuleringsindstillinger". Aktiver denne, så dine valg forbliver gemt. Der vil typisk vises en bekræftelsesmeddelelse, når indstillingerne er gemt.

Hvor Finder Jeg Emulering-fanen i Edge?

I tidligere versioner af Edge (før Chromium-overgangen) var der en dedikeret "Emulation"-fane i F12-udviklerværktøjerne. I den nuværende Chromium-baserede version er disse funktioner integreret i "Enhedsværktøjslinjen" (Device Toolbar), som du aktiverer ved at klikke på mobil/tablet-ikonet. Hvis du ikke kan se ikonet, skal du muligvis klikke på de tre prikker i Udviklerværktøjslinjen for at tilpasse værktøjslinjen og aktivere det.

Simulering af Internet Explorer 11 i Edge

Selvom Edge er den moderne browser, understøtter Microsoft stadig ældre websteder, der kræver Internet Explorer, via "Internet Explorer-tilstand" (IE mode). Dette er særligt vigtigt for virksomheder med ældre interne applikationer.

Sådan aktiverer du IE-tilstand:

1. Åbn Microsoft Edge-indstillinger (klik på de tre prikker øverst til højre og vælg "Indstillinger").
2. Gå til "Standardbrowser" (Default browser).
3. Find sektionen "Kompatibilitet med Internet Explorer" (Internet Explorer compatibility).
4. Aktiver kontakten "Tillad websteder at blive genindlæst i Internet Explorer-tilstand" (Allow sites to be reloaded in Internet Explorer mode).

Når dette er aktiveret, kan du, når du besøger et websted, klikke på de tre prikker i Edge, gå til "Flere værktøjer" og vælge "Genindlæs i Internet Explorer-tilstand" (Reload in Internet Explorer mode). Du kan også konfigurere specifikke websteder til altid at åbne i IE-tilstand via "Kompatibilitetsvisningsindstillinger" (Compatibility View settings).

Hvordan Ændrer Jeg Min Browser til Mobilvisning?

Processen beskrevet ovenfor er specifikt for at se et websted i mobilvisning *i* Microsoft Edge på en computer. Hvis du mener, hvordan du indstiller din *faktiske* mobilbrowser til at vise desktop-versioner af websteder, er det en anden sag:

I Google Chrome (på Android):

1. Åbn Chrome-appen.
2. Tryk på menuikonet (tre prikker) øverst til højre.
3. Find og aktiver indstillingen "Desktop-websted" (Desktop site).

I Microsoft Edge (på Android/iOS):

1. Åbn Edge-appen.
2. Tryk på de tre prikker nederst til højre (eller øverst til højre afhængigt af OS).
3. Vælg "Indstillinger".
4. Find "Generelt" eller "Avancerede indstillinger".
5. Under "Sidevisningsindstillinger" (Site display settings) eller lignende, kan du finde en indstilling til at "Vis desktop-websted" (View desktop site) som standard eller for individuelle sider.

Anmodning om et Mobilwebsted i Edge (Desktop)

Dette refererer til at få et websted til at vise sin mobilversion, selvom du tilgår det fra en desktop-browser. Dette opnås typisk ved at ændre brugeragentstrengen i Udviklerværktøjer, som beskrevet tidligere under "Ændring af Emuleringstilstand". Ved at vælge en mobil brugeragentstreng, vil webserveren sende dig mobilversionen af siden.

Fejlfinding af Edge-kompatibilitet

Hvis du oplever problemer med, at websteder ikke vises korrekt i Microsoft Edge, kan kompatibilitetstilstand være en løsning. Selvom den primære metode til at køre IE-tilstand er beskrevet ovenfor, kan du også prøve følgende for generelle kompatibilitetsproblemer:

1. Højreklik på Edge-genvejen: Find Microsoft Edge-ikonet på dit skrivebord, højreklik på det og vælg "Egenskaber" (Properties).
2. Gå til fanen "Kompatibilitet" (Compatibility): Her kan du prøve at køre programmet i en kompatibilitetstilstand for en ældre Windows-version (f.eks. Windows 8).
3. Tjek "Internet Explorer-kompatibilitet": Inden for Edge's egne indstillinger kan du, som nævnt, aktivere IE-tilstand for specifikke websteder.

Hvordan Ved Jeg, Om Microsoft Edge Er i Kompatibilitetstilstand?

Når et websted vises i Internet Explorer-tilstand, vil du typisk se et lille IE-ikon i adresselinjen eller i værktøjslinjen i Microsoft Edge. Dette indikerer, at siden indlæses ved hjælp af Internet Explorer-motoren for at sikre kompatibilitet.

Åbning af Emulering i Edge

Som tidligere nævnt, aktiveres emulering i moderne Edge ved at åbne Udviklerværktøjer (F12) og klikke på "Skift enhedsværktøjslinje"-ikonet (Toggle device toolbar). Dette åbner et panel, hvor du kan vælge enheder, ændre skærmstørrelser og teste forskellige brugeragentstrenge.

Aktivering af Emulering i Chrome

Processen i Google Chrome er meget lignende:

1. Åbn Chrome DevTools (F12).
2. Klik på "Skift enhedsværktøjslinje"-ikonet.
3. Vælg en enhed fra listen eller indtast brugerdefinerede dimensioner.

Har Edge en Kompatibilitetstilstand?

Ja, Microsoft Edge har en form for kompatibilitetstilstand, primært gennem "Internet Explorer-tilstand" (IE mode), som tillader ældre websteder designet til IE11 at fungere korrekt. Dette er en vigtig funktion for virksomheder, der stadig er afhængige af ældre webapplikationer.

Er Edge og IE11 Det Samme?

Nej, Edge og Internet Explorer 11 er ikke det samme. Microsoft Edge er Microsofts moderne webbrowser, mens Internet Explorer 11 er en ældre browser. IE11 er ved at blive udfaset. "Internet Explorer-tilstand" i Edge er en funktion, der *emulerer* IE11 for at give bagudkompatibilitet, men det er ikke det samme som at køre selve IE11.

Hvordan Fungerer Emulering i Microsoft Edge DevTools?

Enhedsemulering i Edge DevTools er en simulering af, hvordan et websted ser ud og opfører sig på en mobil enhed. Det betyder, at det ikke kører din kode på en faktisk mobil enhed. I stedet efterligner det:

• Skærmstørrelse og opløsning: Viser, hvordan layoutet tilpasser sig forskellige skærmdimensioner.
• Brugeragentstreng: Identificerer browseren som en bestemt mobilmodel.
• Touch-interaktioner: Simulerer touch-begivenheder, selvom det ikke er en perfekt gengivelse af ægte touch-input.
• Netværksforhold: Nogle gange kan du simulere langsommere netværksforbindelser for at teste ydeevne.

Det er vigtigt at bemærke, at emulering ikke kan simulere alt, der er unikt for mobile enheder, såsom specifikke hardwarefunktioner eller det præcise touch-feedback.

Brug af Mobilbrowser-emulator i Microsoft Edge

For at bruge mobilbrowser-emulatoren i Edge:

1. Åbn Udviklerværktøjer (F12).
2. Klik på "Skift enhedsværktøjslinje"-ikonet.
3. Vælg en enhed fra listen. Du kan også klikke på "Rediger" (Edit) for at tilføje eller fjerne enheder fra listen eller indtaste brugerdefinerede dimensioner.
4. Naviger rundt på webstedet, som du ville gøre på en telefon. Du kan bruge "Opdater"-knappen i værktøjslinjen for at genindlæse siden i den valgte emulering.
5. Når du er færdig, skal du blot lukke Udviklerværktøjer-panelet (klik på X) eller lukke hele browseren.

Hvordan Aktiverer Jeg Emulering af en Anden Browser i Chromium Edge?

I Chromium Edge kan du, ligesom i Chrome, bruge "Skift enhedsværktøjslinje" til at simulere forskellige enheder. For at simulere en *anden browser* (f.eks. Safari eller Firefox) mere præcist, skal du typisk ændre brugeragentstrengen. Mens der ikke er en direkte dropdown-menu for alle browsere, kan du ofte finde en liste over foruddefinerede brugeragenter, der inkluderer forskellige browsertyper og versioner, eller du kan indtaste en brugerdefineret streng.

Sådan Simulerer Jeg en Mobil enhed i Edge

Udover at bruge "Skift enhedsværktøjslinje"-ikonet, kan du også bruge følgende funktioner i Udviklerværktøjer:

• Vis medieforespørgsler (Show media queries): Dette hjælper med at visualisere, hvor de forskellige breakpoints i dit CSS anvendes, hvilket er afgørende for responsivt design.
• Juster viewport-bredde: Træk i siderne af det emulerede vindue for at ændre bredden og teste, hvordan dit design reagerer dynamisk.
• Vælg enhedstype: Brug listen til at skifte mellem forskellige mobile, tablet- og desktop-enheder.

Fejlfinding af UI-problemer på Mobil med Edge DevTools

Det er et kendt problem, at visse UI-fejl kan være svære at reproducere på desktop, selv med emulering. Hvis du oplever et problem specifikt i Edge-appen på din telefon, og det ikke kan reproduceres på desktop, kan det skyldes dybere forskelle i rendering-motoren eller specifikke mobile funktioner, der ikke emuleres fuldt ud. Desværre er direkte debugging af Edge-appen på en telefon (med adgang til de samme websteder som på computeren) ikke en standardfunktion, der er lige så tilgængelig som desktop DevTools. Nogle udviklere bruger værktøjer som Chrome DevTools' remote debugging-funktioner, men dette kræver, at den pågældende app er bygget til det, eller at man bruger en browser, der understøtter det. For Edge-specifikke problemer, der kun opstår på mobil, kan det være nødvendigt at stole på brugerrapporter eller teste på en fysisk enhed med begrænsede debugging-muligheder.

Hvis du vil læse andre artikler, der ligner Edge Browser: Mobilvisning og Emulering, kan du besøge kategorien Software.