Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Safari Web Inspector
Webdesign

Kratki Savjet: Upotreba Web Inspector-a za Otklanjanje Grešaka na Mobilnoj Verziji Safari-ja

by
Length:LongLanguages:

Croatian (Hrvatski) translation by Maja Petek (you can also view the original English article)

Izgradnja i otklanjanje grešaka na web stranicama i web aplikacijama za mobilne uređaje, ponekad može biti prava gnjavaža. Na desktopu imamo moćne alate za uklanjanje bug-ova; većina pretraživača ima web inspector neke vrste. Ali nemamo te alate za uređaje kao što su iPhone i iPad...to jest, nismo ih imali do sada!

Sa nedavno izdanim Safari 8 i iOS 6, sada možete koristiti Web Inspector da izgradite i otklonite bug-ove na web stranicama na desktopu i na mobilnoj verziji Safari-ja. Najbolje od svega? Proces je vrlo jednostavan. Pratite ovaj tutorial i za čas ćete imati moćne alate za otklanjanje bug-ova za mobilne iOS uređaje.

Moderni razvojni alati za web preglednike bili su ogromna pomoć u izgradnji web stranica i web aplikacija. Chrome ima alate za developere. Firefox? Firebug. Safari? Web Inspecor. Sve ekstremno moćni alati u web development-u.

Screenshot Safari web inspector

Sve do sada, otklanjanje bug-ova na web stranicama i web aplikacijama na mobilnim uređajima je bilo gnjavaža. Pošto Safari i Chrome oboje pokreće webkit platforma, mnogo je sličnosti u načinu na koji desktop i mobilni pretraživači renderiraju web izgled. Stoga mnogi dizajneri/developeri grade i prilagođavaju svoje web stranice na desktopu koristeći jedan od ovih pretraživača, pretpostavljajući da će sličnosti koje nastaju od webkit platforme renderirati stranicu jednako i na mobilnom uređaju.

Ipak, mobilne i desktop platforme su zapravo prilično različite. Imaju različite kapacitete memorije, potencijal performansi, ulazne uređaje i mrežno povezivanje. Zato je postao imperativ da dizajnerski alati za otklanjanje bug-ova na mobilnim uređajima postane učinkovitije i rame uz rame sa desktop alatima.

Apple-ova nova softver izdanja iOS 6 i Safari 6 donose na mobilne uređaje mnoge od značajki alata za otklanjanje grešaka desktop pretraživača koje svi poznajemo i volimo. U ovom tutorialu ću vam pokazati jednostavan proces da podesite otklanjanje grešaka na mobilnim web stranicama koristeći Safari-jev Web Inspector.

Prije nego što počnemo, napomena o kompatibilnosti: loše vijesti za Windows korisnike. Samo na Mac-u možete otklanjati bug-ove pomoću web inspectora. Safari 6 za windows još nije dostupan. Također, Safari 6 je dostupan samo na Mac-ove koji koriste OSX Lion pa nadalje.

Metode za Korištenje Web Inspectora

Postoje dvije metode za upotrebu Web Inspectora na mobilnom Safari-ju:

  1. Metoda sa Stvarnim Uređajem: upotrijebite stvarni iOS uređaj (iPhone, iPad, itd.) spojen na raćunalo putem USB-a
  2. Metoda sa Virtualnim Uređajem: Upotrijebite iOS simulator, koji je dio Xcode-a

Obraditi ćemo obje metode, a vi odlučite koja vam više odgovara.

1. korak: Provjerite je li uređaj ažuriran (ako nije, ažurirajte ga)

Pošto je otklanjanje bug-ova sa web inspector-om nova značajka, morate se osigurati da imati najnoviji softver.

Metoda sa Stvarnim Uređajem: Kako biste koristili Web Inspector u tandemu sa stvarnim iOS uređajem, trebati ćete sljedeće:

  • iOS uređaj (iPhone, iPd, iTouch) sa iOS 6
  • USB Kabel
  • Safari 6
  • Mac OSX Lion (10.7.4) ili novije

Metoda sa Virtualnim Uređajem: Kako biste koristili Web Inspector zajedno s iOS simulatorom, trebati ćete sljedeće:

Provjeravanje Verzije Softvera: kako biste provjerili imate li iOS 6 na svojem iOS uređaju, na uređaju idite na "Settings > General > About".

iOS Version Number Screenshot

Kako biste provjerili imate li Safari 6 idite na Safari-jev izbornik i kliknite "Safari > About Safari".

Safari Version Number Screenshot

Kako biste bili sigurni da imate Lion, kliknite na Apple logo u izborniku i odaberite "About this Mac".

OSX Version Number Screenshot

Kako biste bili sigurni da imate ispravnu verziju Xcode-a, otvorite Xcode i odaberite "Xcode > About Xcode"

Xcode Version Number Screenshot

2. korak: Uključite Alate za Developere

Morate omogućiti alate za developere i web inspector na desktop i mobilnim verzijama Safari-ja.

Metoda sa Stvarnim Uređajem: Ako ćete koristiti stvarni uređaj, spojite ga USB-om na Mac.

Metoda sa Virtualnim Uređajem: Ako želite koristiti iOS simulator, otvorite Xcode, zatim desnim gumbom miša kliknite na dock ikonu i odaberite "Open Developer Tool > iOS Simulator".

Screenshot opening iOS Simulator

Mobilni Safari: Na stvarnom iOS uređaju ili iOS simulatoru idite na "Settings > Safari > Advanced" i uključite "Web Inspector".

iOS Screenshot for turning on web inspector

Desktop Safari: Ako već niste, uključite alate za razvojne programere u Safari-ju. Znati ćete da su uključeni ako vidite "Develop" u izbornoj traci.

Safari 6 Developer Menu

Ako ne možete vidjeti "Develop" u izbornoj traci, idite na idite na traku izbornika i kliknite "Safari > Preferences > Advanced" i odaberite "Show develop menu in menu bar" kućicu.

Safari 6 Advandced Preferences

3. korak: Pregledajte Svoju Web Stranicu

Sada kada imate iOS Simulator ili iOS uređaj USB-om spojen na Mac, spremni ste početi koristiti Web inspector na vašoj web stranici.

Na Mac-u otvorite Safari i idite na "Develop". Sada biste trebali vidjeti iOS uređaje (virtualne ili stvarne) koje ste spojili pokrenuli na Mac-u. Na slici ispod možete vidjeti da ja na izborniku imam dva uređaja: jedan je iOS simulator, a drugi je stvaran iPhone spojen na moj Mac.

Screenshot developer menu devices

Kako biste stvarno počeli pregledavati web stranicu, morate imati pokrenut moblini Safari na uređaju i otvoriti jednu od kartica. Ako nemate otvoren Safari, vidjeti ćete poruku "No Inspectable Applications".

Screenshot developer menu no applications

Kako biste počeli pregledavanje, samo unesite URL stranice koju želite pregledati na mobilnoj verziji Safari-ja i zatim odaberite tu stranicu na "Develop" izborniku. Možete početi pregledavati stranice na stvarnom iOS uređaju ili iOS simulatoru. Kada odaberete stranicu, vidjeti ćete plavi sloj preko stranice koji označava onu koju ste odabrali.

Screenshot developer menu virtual device
Screenshot developer menu real device

Odabirom stranice, Safari-jev Web Inspector će otvoriti i dozvoliti da počnete pregledavati stranicu. To je to!

Screenshot iOS simulator and web inspector

Zaključak

Sada kada pri ruci imate Safari-jev Web Inspector, imate više kontrole u izgradnji i otklanjanju bug-ova web stranica i web aplikacija.

Evo primjera nekih stvari koje sada možete raditi kada otklanjate bug-ove na mobilnim stranicama:

  • Napraviti promjene na HTML-u i CSS-u.
  • Vidjeti kako vaša web stranica/aplikacija radi uključujući mogućnost da vidite detalje za JavaScript evente i mrežne zahtjeve.
  • Otklanjanti Javascript bug-ove koristeći breakpoints i druge alate.
  • Vidjeti upozorenja i greške.
  • Pristupiti konzoli.
  • Pretražiti DOM.
  • Pristupiti i pregledati memoriju stranice.

Imate alate, sada krenite na izgradnju!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.