Kako koristiti Web Inspector za otklanjanje pogrešaka Mobile Safari (iPhone ili iPad)

Razvijanje web stranica za mobilne uređaje ili otklanjanje pogrešaka u vašoj hibridnoj aplikaciji često je teško. No, srećom za ljude koji dizajniraju na iOS-u, počevši od iOS-a 6, Apple nudi značajku udaljenog web-inspektora u iOS-u.

Web Inspector omogućuje programerima weba i mobilnih aplikacija da koriste macOS i OS X Safari Developer Tools za daljinsko otklanjanje pogrešaka web sadržaja ili hibridnih aplikacija u mobilnom Safariju na iPadu ili iPhoneu.

To je jednostavan i praktičan način za otklanjanje pogrešaka, optimizaciju i modificiranje vaših web stranica ili hibridnih aplikacija na iOS-u.

Da biste pristupili tim razvojnim alatima, omogućite izbornik Razvoj u naprednim postavkama Safarija Maca.

Brzi savjeti

Slijedite ove brze savjete da biste pokrenuli web inspektora kako biste mogli otkloniti pogreške na svojoj web-lokaciji ili aplikaciji za Safari

• Poništite postavke lokacije i privatnosti na vašem iPhoneu, iPadu ili iPod touchu. Ići Postavke > Općenito > Reset > Poništi lokaciju i privatnost
• Provjerite jeste li se prijavili na isti Apple ID na računalu kao vaš iPhone, iPad ili iPod touch
• Uključite Safari iCloud sinkronizaciju za računalo i bilo koji iPhone, iPad ili iPod touch
• Na iPhoneu ili iPadu idite na Postavke > Safari > Napredno i uključite Web Inspektor
• Na računalu otvorite Safari i idite na Safari izbornik > Postavke > Napredno i kvačicom Prikaži izbornik Razvoj u traci izbornika

povezani članci

• Pregledajte izvorni kod web-stranice na iPadu ili iPhoneu. Nije potrebna aplikacija!
• Kako vidjeti HTML izvorni kod u Safariju
• Kako vidjeti Favicons u Safariju za iPhone i Mac

Potrebno je Mac računalo

Žao nam je Windows ljudi, ali Safari's Web Inspector kompatibilan je samo s Macovima!

Koristite isti Apple ID i iCloud Sync!

Provjerite jesu li i vaš iDevice i vaš Mac prijavljeni s istim Apple ID-om i jesu li na iCloudu uključili Safari.

Za vaš iDevice: Postavke > Apple ID profil > iCloud > Safari > uključeno

Za vaš Mac: Appleov izbornik > Postavke sustava > Apple ID ili iCloud > Safari > Označeno

I provjerite je li i Safari ista verzija

Provjerite je li Safari na vašem Macu ista verzija kao Safari na vašem iDeviceu. Možda ćete morati ažurirati svoju verziju iOS-a ili verziju Safarija koja radi na vašem Macu.

Poništite postavke lokacije i privatnosti

1. Ići Postavke > Općenito
2. Odaberi Resetiraj
3. Odaberite da Poništi lokaciju i privatnost

Profesionalni savjet za prečac na tipkovnici na Macu za web programere

Ako pritisnete CTRL+Command+R u Safariju, možete vidjeti kako bi web stranica izgledala na određenom uređaju odabirom uređaja.

Koristite Web Inspector za otklanjanje pogrešaka u mobilnom Safariju

1. Na iPadu, iPhoneu ili iPod touchu dodirnite Postavke > Safari > Napredno i uključite Web Inspektor. I omogućite JavaScript ako već nije uključen

2. Na Macu pokrenite Safari i idite na Safari izbornik > Postavke > Napredno onda provjeri "Prikaži izbornik Razvoj u traci izbornika” ako to već niste učinili

3. Povežite svoj iOS uređaj na Mac pomoću USB kabela. Ovo je kritično – uređaje morate spojiti ručno, pomoću kabela. Ne radi preko WiFi-a!

4. Sada na iPadu otvorite web-mjesto koje želite otkloniti, a zatim na Macu otvorite Safari i idite na "Razviti" Jelovnik. Sada vidite svoj iDevice koji ste povezali sa svojim Mac. Ako nemate otvorenu nijednu stranicu na svom iDeviceu, vidjet ćete poruku "Nema aplikacija koje se mogu pregledati".

5. Sada otklonite pogreške na stranici koja je otvorena na mobilnom Safariju baš kao što biste otklonili pogreške na Macu, pregledajte DOM elemente, modificirajte CSS, izmjerite performanse stranice i pokrenite Javascript naredbe.

Upotrijebite alat za otklanjanje pogrešaka koji će vam pomoći pronaći uzrok bilo kakvih JavaScript pogrešaka na vašoj web-stranici. Možete dodati točke prekida, otkloniti pogreške u javascriptu i provjeriti vrijednost varijabli tijekom izvođenja.

Safari bi također trebao otkriti sve CSS, HTML i JavaScript pogreške. I vidjet ćete pojedinosti svake pogreške u alatu za ispravljanje pogrešaka.

iDevice se ne prikazuje u izborniku za razvoj u Safariju?

•  Izbrišite Safari predmemoriju i kolačiće
• Ažurirajte Safari na svom Macu i iDeviceu ako je ažuriranje dostupno.
  • Ako koristite beta verziju iOS-a ili macOS-a, možda ćete morati pokrenuti najnoviju beta verziju na svim uređajima
• Pokušajte s drugim kabelom i/ili portom na svom Macu. Uvjerite se u to kabel je originalni Apple Lightning kabel ili MFI Certified (Made For iPhone)
• Provjerite je li Web Inspector uključen. Ažuriranja iOS-a ponekad to vraćaju na zadanu postavku ISKLJUČENO. Stoga samo provjerite Postavke > Safari > Napredno > Web inspektor
  • Pokušajte isključiti Web Inspector, pričekajte 10 sekundi i ponovno ga uključite
• Umjesto toga isprobajte preglednik Safari Technology Preview
• Zatvorite Safari na svom Macu i ponovno ga pokrenite. Provjerite prepoznaje li Safari vašeg Maca vaš uređaj i dopušta otklanjanje pogrešaka
• Provjerite da ne koristite Safarijev način privatnog pregledavanja if vaš iDevice se samo nakratko prikazuje u Safarijevom izborniku Develop, a zatim nestaje
• Otvorite Monitor aktivnosti i provjerite što se događa sa Safarijem

Savjeti za čitatelje 

• Ako koristite stariji iDevice s iOS 6 ili starijim, Safari web preglednik vašeg uređaja ima vlastitu ugrađenu konzolu za ispravljanje pogrešaka! Jednostavno pristupite Safarijevoj konzoli za ispravljanje pogrešaka tako što ćete otići na Postavke > Safari > Programer > Konzola za ispravljanje pogrešaka