Share
Bygging og feilsøking av nettsteder og webapplikasjoner for mobile enheter kan være et problem. På skrivebordet har vi kraftige feilsøkingsverktøy; de fleste nettlesere har en nettinspektør av noe slag. Men vi har ikke disse verktøyene for enheter som iPhone og iPad ... det er, til nå!
Med den nylig utgivelsen av Safari 6 og iOS 6, kan du nå bruke web inspektør til å bygge og feilsøke nettsteder på skrivebordet og på mobil Safari. Best av alt? Det er en enkel prosess å sette opp. Følg denne veiledningen, og du vil få noen kraftige feilsøkingsverktøy for mobile iDevices på fingertuppene på kort tid.
Moderne nettleserutviklerverktøy har vært en stor hjelp i å bygge nettsteder og webapplikasjoner. Chrome har utviklerverktøy. Firefox? Firebug. Safari? Web inspektør. Alle ekstremt kraftige verktøy i webutvikling.
Vær så sånn at feilsøking av nettsteder og webapplikasjoner på mobile enheter har oppstått så langt som mulig. Som Safari og Chrome kjører begge på webkitmotoren, er det mange likheter i måten skrivebordet og mobilnettleseren gjør et weboppsett. Dermed bygger og utvikler de fleste designere / utviklere sine nettsteder på skrivebordet ved hjelp av en av disse browsere, forutsatt at likhetene som følger av webkitmotoren, vil gjøre siden like stor på en mobil enhet.
Imidlertid er mobile og stasjonære plattformer akutalt ganske forskjellige. De har forskjellig minnekapasitet, ytelsespotensial, inngangsenheter og nettverkstilkobling. Så det har blitt avgjørende at en designerens feilsøkingsverktøy for mobile enheter blir mer prestisjefylte og samsvarer med sine desktop motparter.
Apples nye programvareutgivelser av iOS 6 og Safari 6 gir mange av funksjonene i nettleserens feilsøkingsverktøy vi alle kjenner og elsker til mobile enheter. Denne opplæringen vil vise deg den enkle prosessen med å få oppsett for å feilsøke mobile nettsteder ved hjelp av Safaris webinspektør.
Før vi begynner, et notat om kompatibilitet: Det er litt dårlige nyheter for de som bruker Windows. Du kan bare feilsøke ved hjelp av den eksterne nettinspektøren på en Mac. Safari 6 for Windows er ikke tilgjengelig. Safari 6 er bare tilgjengelig for Mac-maskiner som kjører OSX Lion eller høyere.
Det er to metoder for bruk av web inspektør i mobil Safari:
Vi dekker begge disse metodene, og lar deg velge hvilken som passer best til din situasjon.
Fordi feilsøking av mobile enheter med nettinspektør er en ny funksjon, må du sørge for at du har all den nyeste programvaren.
Real Device Metode: For å bruke web inspektør sammen med en ekte iDevice, trenger du følgende:
Virtuell enhet Metode: Hvis du vil bruke web inspektør i kombinasjon med iOS simulator, trenger du følgende:
Kontrollerer programvareversjoner: For å sjekke om du kjører iOS 6 på iDevice, gå til "Innstillinger> Generelt> Om" på enheten.
For å sjekke om du kjører Safari 6, gå til Safari menylinje og klikk på "Safari> Om Safari".
For å sikre at du kjører Lion, klikk på Apple-logoen i menylinjen og velg "Om denne Mac"
For å sikre at du kjører riktig versjon av Xcode, åpne Xcode og velg "Xcode> About Xcode"
Du må aktivere utviklerverktøyene og nettinspektøren i skrivebordet og mobilversjonen av Safari.
Real Device Metode: Hvis du skal bruke en ekte enhet, koble den til din Mac via USB.
Virtuell enhet Metode: Hvis du skal bruke iOS-simulatoren, åpner du Xcode, høyreklikker du på dock-ikonet og velger "Åpne utviklerverktøy> iOS-simulator".
Mobil Safari: På din ekte iDevice eller i iOS-simulatoren gå til "Innstillinger> Safari> Avansert" og slå på "Web Inspector".
Desktop Safari: Hvis du ikke allerede gjør det, må du sørge for at utviklerverktøyene i Safari er slått på. Du vet at du har dem slått på hvis du kan se "Utvikle" i menylinjen.
Hvis du ikke kan se "Utvikle" i menylinjen, går du til menylinjen og klikker på "Safari> Innstillinger> Avansert" og merk av for "Vis utviklingsmeny i menylinje".
Nå som du har enten IOS Simulator åpen eller din iDevice koblet til Mac via USB (eller begge!), Er du klar til å begynne å bruke web inspektør på nettstedet ditt.
På din Mac, åpne Safari og gå til "Utvikle". Du bør nå se eventuelle iDevices (virtuelle eller ekte) som du har koblet til og kjører med din Mac. I skjermbildet nedenfor ser du at jeg har to enheter på menyen: en er iOS-simulatoren, den andre er en ekte iPhone koblet til min Mac.
For å faktisk begynne å inspisere et nettsted, må du ha mobil Safari lansert på enheten og ha en av kategoriene åpne for nettstedet. Hvis du ikke har mobil Safari, åpner du en melding som sier "Ingen inspeksjonsprogrammer".
For å begynne å inspisere, skriv inn nettadressen til siden du vil inspisere i mobil Safari, og velg deretter det aktuelle nettstedet fra "Utvikle" -menyen. Du kan begynne å inspisere nettsteder på din ekte iDevice eller fra iOS-simulatoren. Når du velger siden, ser du et blått overlegg på siden, som indikerer hvilken du har valgt.
Ved å velge et nettsted åpner Safaris webinspektør og lar deg begynne å inspisere nettstedet ditt. Det er det!
Nå som du har Safari's webinspektør innen fingertuppene, har du mye mer kontroll i å bygge og feilsøke nettsteder og webapplikasjoner..
Her er et utvalg av noen ting du kan gjøre nå når du feilsøker mobilnettsteder:
Du har verktøyene, gå videre og bygge!
Accentsconagua