Sådan bruges webinspektør til at fejle Mobile Safari (iPhone eller iPad)

Det er ofte svært at udvikle websider til mobilenheder eller fejlfinding i din hybridapp. Men heldigvis for folk, der designer på iOS og starter helt tilbage med iOS 6, tilbyder Apple en fjernwebinspektørfunktion i iOS.

Webinspektør giver web- og mobilappudviklere mulighed for at bruge macOS og OS X Safari Developer Tools til eksternt fejlfinding af webindhold eller hybridapps i mobil Safari på iPad eller iPhone.

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

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

Følg disse hurtige tip for at få webinspektøren til at arbejde, så du kan debugge dit websted eller din app til Safari

  • Nulstil dine placerings- og privatlivsindstillinger på din iPhone, iPad eller iPod touch. Gå tilIndstillinger> Generelt> Nulstil> Nulstil placering og privatliv
  • Sørg for at logge ind på det samme Apple-id på computeren som din iPhone, iPad eller iPod touch
  • Slå Safari iCloud-synkronisering til både computeren og enhver iPhone, iPad eller iPod touch
  • Gå til på iPhone eller iPadIndstillinger> Safari> Avanceret og skift til Webinspektør
  • Åbn Safari på computeren, og gå tilSafari-menu> Indstillinger> Avanceret og afkrydsning Vis menuen Udvikl i menulinjen

Mac-computer påkrævet

Undskyld Windows folk, men Safari's Web Inspector er kun kompatibel med Mac'er!

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 skifter ON til Safari 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> Markeret

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 webudviklere

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

Skift tastaturgenvejen for at afslutte visningen af ​​webudvikling.

Brug Webinspektør til at debugge mobil Safari

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

2. Start din Safari på din Mac, og gå til Safari-menu> Indstillinger> Avanceret tjek derefter “Vis menuen Udvikl 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 fungerer ikke via WiFi!

4. Åbn det websted, du vil fejle, på din iPad, åbn derefter Safari på din Mac og gå til “UdvikleMenuen. Du ser nu din iDevice, som du oprettede forbindelse til din Mac. Hvis du ikke har nogen side åben på din iDevice, ser du en meddelelse, der siger "Ingen applikationer, der kan inspiceres."

5. Fejlfind nu den side, der er åben på mobil Safari, ligesom du ville debugge på Mac, inspicere DOM-elementer, ændre CSS, måle sideydelse og køre Javascript-kommandoer.

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

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

iDevice vises ikke i menuen Develop i Safari?

  • Ryd din Safari-cache og cookies
  • Opdater Safari på din Mac og iDevice, hvis en opdatering er tilgængelig
    • Hvis du kører en beta iOS- eller macOS-version, skal du muligvis køre den nyeste beta på alle enheder
  • Prøv et andet kabel og / eller en port på din Mac. Sørg for, at kablet er et ægte Apple-lynkabel eller MFI-certificeret (lavet til iPhone)
  • Kontroller, at webinspektøren er slået TIL. iOS-opdateringer skifter nogle gange dette tilbage til standard OFF-indstillingen. Så bare sørg for at tjekkeIndstillinger> Safari> Avanceret> Webinspektør
    • Prøv at slå Webinspektør fra, vent 10 sekunder, og tænd igen
  • Prøv Safari Technology Preview-browser i stedet
  • Afslut Safari på din Mac, og genstart den. Se om din Macs Safari derefter genkender din enhed og tillader fejlretning
  • Kontroller, at du ikke bruger Safaris privat browsingtilstand, hvis din iDevice kun vises kortvarigt i Safaris udviklingsmenu og derefter forsvinder
  • Åbn Aktivitetsovervågning, og kontroller, hvad der sker med Safari

Læsertip

  • 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å tilIndstillinger > Safari > Udvikler > Fejlfindingskonsol

Seneste indlæg