Hur man använder Web Inspector för att felsöka Mobile Safari (iPhone eller iPad)

Att utveckla webbsidor för mobila enheter eller felsöka din hybridapp är ofta svårt. Men lyckligtvis för folk som designar på iOS, från och med iOS 6, erbjuder Apple en fjärrwebbinspektörsfunktion i iOS.

Web Inspector tillåter webb- och mobilappsutvecklare att använda macOS och OS X Safari Developer Tools för att fjärrfelsöka webbinnehåll eller hybridappar i mobil Safari på iPad eller iPhone.

Det är ett enkelt och praktiskt sätt att felsöka, optimera och modifiera dina webbsidor eller hybridappar på iOS.

För att komma åt dessa utvecklingsverktyg, aktivera menyn Utveckla i din Macs Safaris avancerade inställningar.

Snabba tips

Följ dessa snabba tips för att få webbinspektören att fungera så att du kan felsöka din webbplats eller app för Safari

• Återställ din plats och sekretessinställningar på din iPhone, iPad eller iPod touch. Gå till Inställningar > Allmänt > Återställ > Återställ plats och sekretess
• Se till att du loggar in på samma Apple-ID på datorn som din iPhone, iPad eller iPod touch
• Aktivera Safari iCloud-synkronisering för både datorn och valfri iPhone, iPad eller iPod touch
• På iPhone eller iPad, gå till Inställningar > Safari > Avancerat och slå på Webbinspektör
• Öppna Safari på datorn och gå till Safari-menyn > Inställningar > Avancerat och bock Visa Utveckla-menyn i menyraden

relaterade artiklar

• Visa webbsidans HTML-källkod på iPad eller iPhone. Ingen app krävs!
• Hur man visar HTML-källkod i Safari
• Hur man ser favoritikoner i Safari för iPhones och Macs

Mac-dator krävs

Tyvärr Windows-folk men Safaris Web Inspector är bara kompatibel med Mac-datorer!

Använd samma Apple-ID och iCloud Sync!

Se till att både din iDevice och din Mac är inloggade med samma Apple-ID och att du slår PÅ Safari i iCloud.

För din iDevice: Inställningar > Apple ID-profil > iCloud > Safari > slås PÅ

För din Mac: Apple-meny > Systeminställningar > Apple ID eller iCloud > Safari > bockmarkerad

Och kontrollera att Safari är samma version också

Se till att Safari på din Mac är samma version som Safari på din iDevice. Du kan behöva uppdatera din iOS-version eller din version av Safari som körs på din Mac.

Återställ din plats och sekretessinställningar

1. Gå till Inställningar > Allmänt
2. Välj Återställa
3. Välja att Återställ plats och sekretess

Pro-tangentbordsgenvägstips på Mac för webbutvecklare

Om du trycker på CTRL+Kommando+R i Safari kan du se hur en webbplats skulle se ut på en viss enhet genom att välja enheten.

Använd Web Inspector för att felsöka mobil Safari

1. På din iPad, iPhone eller iPod touch trycker du på Inställningar > Safari > Avancerat och slå på Webbinspektör. Och aktivera JavaScript om det inte redan är på

2. Starta Safari på din Mac och gå till Safari-menyn > Inställningar > Avancerat kolla sedan "Visa Utveckla-menyn i menyraden” om du inte redan har gjort det

3. Anslut din iOS-enhet till din Mac med USB-kabeln. Detta är viktigt – du måste ansluta enheterna manuellt med en kabel. Det fungerar inte via WiFi!

4. Öppna nu webbplatsen som du vill felsöka på din iPad, öppna sedan Safari på din Mac och gå till "Utveckla”-menyn. Du ser nu din iDevice som du anslutit till din Mac. Om du inte har någon sida öppen på din iDevice ser du ett meddelande som säger "Inga inspekterbara applikationer."

5. Felsök nu sidan som är öppen på mobil Safari precis som du skulle felsöka på Mac, inspektera DOM-element, modifiera CSS, mät sidprestanda och kör Javascript-kommandon.

Använd felsökningsverktyget för att hjälpa dig hitta orsaken till eventuella JavaScript-fel på din webbsida. Du kan lägga till brytpunkter, felsöka javascriptet och inspektera värdet på variablerna vid körning.

Safari bör också upptäcka eventuella CSS-, HTML- och JavaScript-fel. Och du kommer att se detaljerna för varje fel i felsökaren.

iDevice visas inte i utvecklingsmenyn i Safari?

•  Rensa Safari-cache och cookies
• Uppdatera Safari på din Mac och iDevice om en uppdatering är tillgänglig.
  • Om du kör en betaversion av iOS eller macOS kan du behöva köra den senaste betaversionen på alla enheter
• Prova en annan kabel och/eller port på din Mac. Se till att kabeln är en äkta Apple lightning-kabel eller MFI-certifierad (Made For iPhone)
• Kontrollera att Web Inspector är PÅ. iOS-uppdateringar växlar ibland tillbaka detta till standardinställningen AV. Så se bara till att kolla Inställningar > Safari > Avancerat > Web Inspector
  • Försök att stänga av Web Inspector, vänta 10 sekunder och slå på igen
• Prova webbläsaren Safari Technology Preview istället
• Avsluta Safari på din Mac och starta om den. Se om din Macs Safari sedan känner igen din enhet och tillåter felsökning
• Kontrollera att du inte använder Safaris privata surfningsläge iom din iDevice bara dyker upp en kort stund i Safaris utvecklingsmeny och sedan försvinner
• Öppna Activity Monitor och kolla vad som händer med Safari

Lästips 

• Om du använder en äldre iDevice med iOS 6 eller tidigare, har enhetens Safari webbläsare sin egen inbyggda felsökningskonsol! Gå bara till Safaris Debug Console genom att gå till inställningar > Safari > Utvecklare > Felsökningskonsol