Web Inspectorin käyttäminen Mobile Safarin virheenkorjaukseen (iPhone tai iPad)

Verkkosivujen kehittäminen mobiililaitteille tai hybridisovelluksen virheenkorjaus on usein vaikeaa. Mutta onneksi niille, jotka suunnittelevat iOS-käyttöjärjestelmää iOS 6:sta lähtien, Apple tarjoaa etäverkkotarkistusominaisuuden iOS: ssä.

Web Inspectorin avulla verkko- ja mobiilisovelluskehittäjät voivat käyttää macOS- ja OS X Safari Developer Tools -työkaluja verkkosisällön tai hybridisovellusten virheenkorjaukseen iPadin tai iPhonen mobiilisafarissa.

Se on helppo ja käytännöllinen tapa korjata, optimoida ja muokata verkkosivujasi tai hybridisovelluksiasi iOS: ssä.

Pääset käyttämään näitä kehitystyökaluja ottamalla käyttöön Kehitä-valikon Macin Safarin lisäasetuksista.

Pikavinkkejä

Noudata näitä nopeita vinkkejä saadaksesi verkkotarkastajan toimimaan, jotta voit korjata sivustosi tai sovelluksesi Safaria varten

• Palauta sijainti- ja tietosuoja-asetukset iPhonessa, iPadissa tai iPod touchissa. Mene Asetukset > Yleiset > Nollaa > Palauta sijainti ja yksityisyys
• Varmista, että kirjaudut sisään samaan Apple ID: hen tietokoneellasi kuin iPhonessa, iPadissa tai iPod touchissa
• Ota Safari iCloud -synkronointi käyttöön sekä tietokoneessa että missä tahansa iPhonessa, iPadissa tai iPod touchissa
• Siirry iPhonessa tai iPadissa kohtaan Asetukset > Safari > Lisäasetukset ja kytke päälle Webin tarkastaja
• Avaa Safari tietokoneella ja siirry kohtaan Safari-valikko > Asetukset > Lisäasetukset ja valintamerkki Näytä Kehitä-valikko valikkorivillä

Aiheeseen liittyvät artikkelit

• Tarkastele verkkosivun HTML-lähdekoodia iPadilla tai iPhonella. Sovellusta ei tarvita!
• Kuinka tarkastella HTML-lähdekoodia Safarissa
• Kuinka nähdä Favicons Safarissa iPhonessa ja Macissa

Mac-tietokone vaaditaan

Anteeksi Windows ihmiset, mutta Safarin Web Inspector on yhteensopiva vain Mac-tietokoneiden kanssa!

Käytä samaa Apple ID: tä ja iCloud Synciä!

Varmista, että sekä iDevice että Mac ovat kirjautuneena sisään samalla Apple ID: llä ja että otat Safarin käyttöön iCloudissa.

iDevice-laitteellesi: Asetukset > Apple ID -profiili > iCloud > Safari > kytketty päälle

Macille: Omenavalikko > Järjestelmäasetukset > Apple ID tai iCloud > Safari > Valittu

Ja tarkista, että Safari on myös sama versio

Varmista, että Macin Safari on sama versio kuin iDevicen Safari. Saatat joutua päivittämään iOS-versiosi tai Macissasi olevan Safari-versiosi.

Palauta sijainti- ja tietosuoja-asetukset

1. Mene Asetukset > Yleiset
2. Valitse Nollaa
3. Valitse Palauta sijainti ja yksityisyys

Pro-näppäimistön pikanäppäinvinkki Macissa verkkokehittäjille

Jos painat CTRL+Command+R Safarissa, voit nähdä, miltä sivusto näyttäisi tietyllä laitteella valitsemalla laitteen.

Käytä Web Inspectoria mobiili Safarin virheenkorjaukseen

1. Napauta iPadissa, iPhonessa tai iPod touchissa Asetukset > Safari > Lisäasetukset ja kytke päälle Webin tarkastaja. Ja ota JavaScript käyttöön, jos se ei ole jo käytössä

2. Käynnistä Safari Macissa ja siirry kohtaan Safari-valikko > Asetukset > Lisäasetukset sitten tarkista "Näytä Kehitä-valikko valikkorivillä", jos et ole jo tehnyt niin

3. Liitä iOS-laitteesi Maciin USB-kaapelilla. Tämä on tärkeää – laitteet on kytkettävä manuaalisesti kaapelilla. Ei toimi wifin kautta!

4. Avaa nyt iPadilla verkkosivusto, jonka virheenkorjaus haluat tehdä, avaa sitten Macissa Safari ja siirryKehittää”-valikko. Näet nyt iDevice-laitteen, jonka liitit Maciin. Jos iDevice-laitteessa ei ole yhtään sivua auki, näet viestin, jossa lukee "Ei tarkastettavia sovelluksia".

5. Tee nyt virheenkorjaus mobiilissa Safarissa avoinna olevasta sivusta aivan kuten virheenkorjaisit Macissa, tarkista DOM-elementit, muokkaa CSS: ää, mittaa sivun suorituskykyä ja suorita Javascript-komentoja.

Vianetsintätyökalun avulla voit löytää verkkosivusi JavaScript-virheiden syyn. Voit lisätä keskeytyskohtia, tehdä virheenkorjauksen javascriptissä ja tarkastaa muuttujien arvot ajon aikana.

Safarin pitäisi myös havaita kaikki CSS-, HTML- ja JavaScript-virheet. Ja näet kunkin virheen yksityiskohdat debuggerissa.

iDevice ei näy Safarin Kehitys-valikossa?

•  Tyhjennä Safari-välimuisti ja evästeet
• Päivitä Safari Macissa ja iDevicessa, jos päivitys on saatavilla.
  • Jos käytät iOS- tai macOS-beetaversiota, saatat joutua suorittamaan uusimman betaversion kaikissa laitteissa
• Kokeile toista kaapelia ja/tai porttia Macissasi. Varmista että kaapeli on aito Applen salamakaapeli tai MFI-sertifioitu (Made for iPhone)
• Tarkista, että Web Inspector on PÄÄLLÄ. iOS-päivitykset kytkevät joskus tämän takaisin oletusarvoiseen OFF-asetukseen. Joten muista vain tarkistaa Asetukset > Safari > Lisäasetukset > Web Inspector
  • Yritä kytkeä Web Inspector pois päältä, odota 10 sekuntia ja kytke takaisin päälle
• Kokeile sen sijaan Safari Technology Preview -selainta
• Lopeta Safari Macissa ja käynnistä se uudelleen. Katso, tunnistaako Macisi Safari laitteesi ja salliiko virheenkorjauksen
• Tarkista, että et käytä Safarin yksityistä selaustilaa if iDevice näkyy vain hetken Safarin Kehitys-valikossa ja katoaa sitten
• Avaa Activity Monitor ja tarkista, mitä Safarissa tapahtuu

Lukijavinkkejä 

• Jos käytät vanhempaa iDevice-laitetta, jossa on iOS 6 tai vanhempi, laitteesi Safari-verkkoselaimessa on oma sisäänrakennettu virheenkorjauskonsoli! Pääset vain Safarin virheenkorjauskonsoliin menemällä osoitteeseen asetukset > Safari > Kehittäjä > Debug-konsoli