Slik bruker du Web Inspector til å feilsøke Mobile Safari (iPhone eller iPad)

Å utvikle nettsider for mobile enheter eller feilsøke hybridappen din er ofte vanskelig. Men heldigvis for folk som designer på iOS, fra og med iOS 6, tilbyr Apple en ekstern webinspektørfunksjon i iOS.

Web Inspector lar web- og mobilapputviklere bruke macOS og OS X Safari Developer Tools for å eksternt feilsøke nettinnhold eller hybridapper i mobil Safari på iPad eller iPhone.

Det er en enkel og praktisk måte å feilsøke, optimalisere og endre nettsidene eller hybridappene dine på iOS.

For å få tilgang til disse utviklingsverktøyene, aktiver Utvikle-menyen i Mac-ens Safaris avanserte preferanser.

Raske tips

Følg disse raske tipsene for å få nettinspektøren til å fungere slik at du kan feilsøke nettstedet eller appen din for Safari

• Tilbakestill posisjonen og personverninnstillingene på iPhone, iPad eller iPod touch. Gå til Innstillinger > Generelt > Tilbakestill > Tilbakestill plassering og personvern
• Sørg for at du logger på samme Apple-ID på datamaskinen som din iPhone, iPad eller iPod touch
• Slå på Safari iCloud-synkronisering for både datamaskinen og hvilken som helst iPhone, iPad eller iPod touch
• På iPhone eller iPad går du til Innstillinger > Safari > Avansert og slå på Webinspektør
• Åpne Safari på datamaskinen og gå til Safari-meny > Innstillinger > Avansert og hake Vis Utvikle-menyen i menylinjen

relaterte artikler

• Se HTML-kildekoden for nettsiden på iPad eller iPhone. Ingen app kreves!
• Slik viser du HTML-kildekode i Safari
• Slik ser du favorittikoner i Safari for iPhone og Mac

Mac-datamaskin kreves

Beklager Windows folkens, men Safaris Web Inspector er bare kompatibel med Mac-er!

Bruk samme Apple ID og iCloud Sync!

Sørg for at både iDevice og Mac er logget på med samme Apple-ID og at du slår PÅ Safari i iCloud.

For din iDevice: Innstillinger > Apple ID-profil > iCloud > Safari > slått PÅ

For din Mac: Apple-meny > Systemvalg > Apple ID eller iCloud > Safari > Avkrysset

Og sjekk at Safari er den samme versjonen også

Sørg for at Safari på Mac-en er den samme versjonen som Safari på iDevice. Det kan hende du må oppdatere iOS-versjonen eller din versjon av Safari som kjører på Mac-en.

Tilbakestill posisjonen og personverninnstillingene

1. Gå til Innstillinger > Generelt
2. Plukke ut Nullstille
3. Velg å Tilbakestill plassering og personvern

Pro-tastatursnarveitips på Mac for webutviklere

Hvis du trykker CTRL+Kommando+R i Safari, kan du se hvordan et nettsted vil se ut på en bestemt enhet ved å velge enheten.

Bruk Web Inspector til å feilsøke mobil Safari

1. Trykk på på iPad, iPhone eller iPod touch Innstillinger > Safari > Avansert og slå på Webinspektør. Og aktiver JavaScript hvis det ikke allerede er på

2. Start Safari på Mac-en og gå til Safari-meny > Innstillinger > Avansert sjekk deretter "Vis Utvikle-menyen i menylinjen" hvis du ikke allerede har gjort det

3. Koble iOS-enheten til Mac-en med USB-kabelen. Dette er kritisk - du må koble enhetene manuelt ved hjelp av en kabel. Det fungerer ikke via WiFi!

4. Nå på iPad-en din, åpne nettstedet du vil feilsøke, deretter, på Mac-en, åpne Safari og gå til "Utvikle" Meny. Du ser nå iDevice som du koblet til Mac-en. Hvis du ikke har noen åpne sider på iDevice, ser du en melding som sier "Ingen inspiserbare applikasjoner."

5. Feilsøk nå siden som er åpen på mobil Safari akkurat som du ville feilsøkt på Mac, inspiser DOM-elementer, modifiser CSS, mål sideytelse og kjør Javascript-kommandoer.

Bruk feilsøkingsverktøyet for å hjelpe deg med å finne årsaken til eventuelle JavaScript-feil på nettsiden din. Du kan legge til bruddpunkter, feilsøke javascriptet og inspisere verdien av variablene under kjøring.

Safari bør også oppdage eventuelle CSS-, HTML- og JavaScript-feil. Og du vil se detaljene for hver feil i feilsøkeren.

iDevice vises ikke i Develop-menyen i Safari?

•  Tøm Safari-bufferen og slett informasjonskapslene
• Oppdater Safari på Mac og iDevice hvis en oppdatering er tilgjengelig.
  • Hvis du kjører en betaversjon av iOS eller macOS, må du kanskje kjøre den nyeste betaversjonen på alle enheter
• Prøv en annen kabel og/eller port på Mac-en. Sørge for at kabelen er en ekte Apple lightning-kabel eller MFI-sertifisert (laget for iPhone)
• Sjekk at Web Inspector er slått PÅ. iOS-oppdateringer slår noen ganger dette tilbake til standard AV-innstilling. Så det er bare å sjekke Innstillinger > Safari > Avansert > Web Inspector
  • Prøv å slå av Web Inspector, vent 10 sekunder og slå på igjen
• Prøv Safari Technology Preview-nettleseren i stedet
• Avslutt Safari på Mac-en og start den på nytt. Se om din Macs Safari gjenkjenner enheten din og tillater feilsøking
• Sjekk at du ikke bruker Safaris private nettlesingsmodus ihvis iDevice bare vises kort i Safaris Develop-meny og deretter forsvinner
• Åpne Activity Monitor og sjekk hva som skjer med Safari

Lesertips 

• Hvis du bruker en eldre iDevice med iOS 6 eller tidligere, har enhetens Safari-nettleser sin egen innebygde feilsøkingskonsoll! Bare få tilgang til Safaris feilsøkingskonsoll ved å gå til Innstillinger > Safari > Utvikler > Feilsøkingskonsoll