Sådan bruger du Web Inspector til at fejlfinde Mobile Safari (iPhone eller iPad)

Det er ofte svært at udvikle websider til mobile enheder eller fejlfinde din hybridapp. Men heldigvis for folk, der designer på iOS, starter helt tilbage med iOS 6, Apple tilbyder en ekstern webinspektør-funktion i iOS.

Web Inspector giver web- og mobilappudviklere mulighed for at bruge macOS og OS X Safari Developer Tools til at fjernfejle webindhold eller hybridapps i mobil Safari på iPad eller iPhone.

Det er en nem og praktisk måde at fejlsøge, optimere og ændre dine websider eller hybridapps på iOS.

For at få adgang til disse udviklingsværktøjer skal du aktivere menuen Udvikl i din Macs Safaris avancerede præferencer.

Hurtige tips

Følg disse hurtige tips for at få webinspektøren til at fungere, så du kan fejlrette dit websted eller din app til Safari

• Nulstil dine placerings- og privatlivsindstillinger på din iPhone, iPad eller iPod touch. Gå til Indstillinger > Generelt > Nulstil > Nulstil placering og privatliv
• Sørg for, at du logger ind på det samme Apple-id på computeren som din iPhone, iPad eller iPod touch
• Slå Safari iCloud-synkronisering til for både computeren og enhver iPhone, iPad eller iPod touch
• På iPhone eller iPad skal du gå til Indstillinger > Safari > Avanceret og slå til Webinspektør
• På computeren skal du åbne Safari og gå til Safari-menuen > Indstillinger > Avanceret og flueben Vis Udvikle-menuen i menulinjen

relaterede artikler

• Se websidens HTML-kildekode på iPad eller iPhone. Ingen app påkrævet!
• Sådan får du vist HTML-kildekode i Safari
• Sådan ser du favicons i Safari til iPhones og Macs

Mac-computer påkrævet

Beklager Windows folk, men Safaris Web Inspector er kun kompatibel med Macs!

Brug det samme Apple ID og iCloud Sync!

Sørg for, at både din iDevice og din Mac er logget ind med det samme Apple ID, og ​​at du slår Safari TIL i iCloud.

Til din iDevice: Indstillinger > Apple ID-profil > iCloud > Safari > slået TIL

Til din Mac: Apple-menu > Systemindstillinger > Apple ID eller iCloud > Safari > Afkrydsningsfeltet

Og kontroller, at Safari også er den samme version

Sørg for, at Safari på din Mac er den samme version som Safari på din iDevice. Du skal muligvis opdatere din iOS-version eller din version af Safari, der kører på din Mac.

Nulstil din placering og privatlivsindstillinger

1. Gå til Indstillinger > Generelt
2. Vælg Nulstil
3. Vælg at Nulstil placering og privatliv

Pro-tastaturgenvejstip på Mac til web-udviklere

Hvis du trykker på CTRL+Kommando+R i Safari, kan du se, hvordan et websted vil se ud på en bestemt enhed ved at vælge enheden.

Brug Web Inspector til at fejlfinde mobil Safari

1. Tryk på på din iPad, iPhone eller iPod touch Indstillinger > Safari > Avanceret og slå til Webinspektør. Og aktiver JavaScript, hvis det ikke allerede er aktiveret

2. Start Safari på din Mac og gå til Safari-menuen > Indstillinger > Avanceret så tjek "Vis Udvikle-menuen i menulinjen” hvis du ikke allerede har gjort det

3. Tilslut din iOS-enhed til din Mac med USB-kablet. Dette er kritisk - du skal tilslutte enhederne manuelt ved hjælp af et kabel. Det virker ikke via WiFi!

4. Nu på din iPad, åbn det websted, du vil fejlfinde, og åbn derefter Safari på din Mac og gå til "Udvikle” menu. Du ser nu din iDevice, som du har tilsluttet din Mac. Hvis du ikke har nogen åben side på din iDevice, ser du en meddelelse, der siger "Ingen inspektionerbare applikationer."

5. Fejlfind nu siden, der er åben på mobil Safari, ligesom du ville debugge på Mac, inspicer DOM-elementer, modificer CSS, mål sideydelse og kør Javascript-kommandoer.

Brug fejlretningsværktøjet til at hjælpe dig med at finde årsagen til eventuelle JavaScript-fejl på din webside. Du kan tilføje breakpoints, fejlfinde javascriptet og inspicere værdien af ​​variablerne under kørsel.

Safari bør også opdage eventuelle CSS-, HTML- og JavaScript-fejl. Og du vil se detaljerne for hver fejl i debuggeren.

iDevice vises ikke i Udvikl-menuen i Safari?

•  Ryd din Safari-cache og dine cookies
• Opdater Safari på din Mac og iDevice, hvis en opdatering er tilgængelig.
  • Hvis du kører en betaversion af iOS eller macOS, skal du muligvis køre den seneste betaversion på alle enheder
• Prøv et andet kabel og/eller en anden port på din Mac. Sørg for at kabel er et ægte Apple lightning-kabel eller MFI-certificeret (Made For iPhone)
• Tjek, at Web Inspector er slået TIL. iOS-opdateringer skifter nogle gange tilbage til standardindstillingen FRA. Så sørg bare for at tjekke Indstillinger > Safari > Avanceret > Webinspektør
  • Prøv at slå Web Inspector fra, vent 10 sekunder, og slå den til igen
• Prøv Safari Technology Preview browser i stedet
• Afslut Safari på din Mac og genstart den. Se, om din Macs Safari genkender din enhed og tillader fejlretning
• Tjek, at du ikke bruger Safaris Private Browsing-tilstand iHvis din iDevice kun vises kortvarigt i Safaris Udvikler-menu og derefter forsvinder
• Åbn Activity Monitor og tjek, hvad der sker med Safari

Læsertips 

• Hvis du bruger en ældre iDevice med iOS 6 eller tidligere, har din enheds Safari-webbrowser sin egen indbyggede fejlfindingskonsol! Bare få adgang til Safaris Debug Console ved at gå til Indstillinger > Safari > Udvikler > Debug konsol