Izradite i otklonite greške na web stranicama i web aplikacijama za mobilnih uređaja može biti težak zadatak. Na desktopu imamo moćni alati za otklanjanje grešaka; većina pretraživača ima web inspektor. Ali nemamo alate za uređaje kao što su iPhone i iPad... odnosno do sada!
Sa nedavnim izdanjem Safarija 6 i iOS 6, sada možete koristiti web inspektor za izradu i otklanjanje grešaka na web lokacijama na vašem desktopu i mobilnom Safariju. Kako? Proces postavljanja je jednostavan. Slijedite ovaj vodič i gotovo trenutno imate vrlo moćne mobilne alate za otklanjanje grešaka na dohvat ruke.
Savremeni alati za programere pretraživača bili su od ogromne pomoći u izgradnji web stranica i web aplikacija. Chrome ima. Vatrena lisica? ... Safari? Web inspektor. Svi izuzetno moćni alati u web razvoju.
Kako god bilo, do sada je otklanjanje grešaka na web stranicama i web aplikacijama na mobilnim uređajima bio težak zadatak. Budući da Safari i Chrome rade na webkit engine-u, postoji mnogo sličnosti u tome kako desktop i mobilni pretraživač prikazati web izgled. Stoga većina dizajnera / programera kreira i prilagođava svoje web stranice na desktopu koristeći jedan od ovih pretraživača, pod pretpostavkom da će webkit engine rezultirati istim izgledom stranice na mobilnom uređaju.
Međutim, mobilne i desktop platforme su zapravo potpuno različite. Imaju različite memorijske kapacitete, potencijal performansi, ulazne uređaje i mrežna veza... Stoga je postalo imperativ da dizajnerski alati za otklanjanje grešaka za mobilne uređaje postanu efikasniji i u skladu sa svojim desktop kolegama.
Novo verzije softvera Apple za iOS 6 i Safari 6 donijeli su mnoge značajke alata za otklanjanje grešaka desktop računare koje svi znamo i volimo sa mobilnih uređaja. Ovaj vodič će vam pokazati jednostavan proces za dobivanje postavki za otklanjanje grešaka na mobilnim stranicama pomoću Safari web inspektora.
Prvo obratite pažnju na kompatibilnost: za Windows korisnici Ima ih nekoliko loše vijesti... Remote Web Inspector možete otkloniti samo na Macu. Safari 6 za Windows nije dostupan. Također, Safari 6 je dostupan samo za Mac računari sa OSX Lion ili novijim.
Metode korištenja web inspektora
Postoje dvije metode za korištenje web inspektora u mobilnom Safariju:
- Metoda stvarnog uređaja: koristite pravi iDevice (iPhone, iPad, itd.) povezan sa vašim računarom preko USB-a
- Metoda virtuelnog uređaja: koristite iOS simulator koji je dio Xcode-a
Pregledat ćemo obje ove metode i odabrati onu koja je najbolja za vašu situaciju.
Korak 1. Uvjerite se da ste upoznati
Budući da je otklanjanje grešaka na mobilnim uređajima pomoću web inspektora nova funkcija morate biti sigurni da imate najnoviji softver.
Prava metoda uređaji: da biste koristili web inspektor u tandemu sa pravim iDeviceom, potrebno vam je sljedeće:
- IDuređaj (iPhone, iPad, iTouch) radi ispod iOS kontrola 6
- USB kabl
- Safari 6
Da biste koristili web inspektor u tandemu sa iOS simulatorom, potrebno vam je sljedeće:
- Safari 6
- Mac OSX Lion (10.7.4) ili noviji
- Xcode 4.5 sa iOS 6 SDK (dostupno u trgovini aplikacija)
Provjera verzije softvera: da biste provjerili koristite li iOS 6 na svom iDeviceu, idite na "Postavke> Općenito> O" na svom uređaju.
Da biste provjerili koristite li Safari 6, otvorite Safari alatnu traku i kliknite Safari> O Safariju.
Da biste bili sigurni da koristite Lion kliknite na Apple logo na traci menija i odaberite "O ovom Macu"
Da biste bili sigurni da koristite ispravna verzija Xcode, otvorite Xcode i odaberite "Xcode> About Xcode"
Korak 2. Omogućavanje alata za programere
Morate omogućiti alate za programere i web inspektor na desktopu i mobilnom uređaju Safari verzije.
Metoda stvarnog uređaja: ako ćete koristiti pravi uređaj, povežite ga na svoj Mac putem USB-a.
Metod virtuelnog uređaja: ako ćete koristiti iOS simulator, otvorite Xcode, a zatim kliknite desni klik prijeđite mišem preko dock ikone i odaberite "Otvori alat za programere> iOS Simulator".
Mobilni Safari: na vašem stvarnom iDevice ili iOS simulatoru idite na Postavke> Safari> Napredno i omogućite Web Inspector.
Desktop Safari: ako već niste, provjerite jesu li vaši Safari programski alati omogućeni. Ovo možete provjeriti otvaranjem "Razvoj" na traci menija.
Ako ne vidite "Razvoj" na traci menija, idite na traku menija i kliknite na "Safari> Preferences> Advanced" i potvrdite okvir "Prikaži meni za razvoj na traci menija".
Korak 3. Provjerite svoju web stranicu
Sada kada imate otvoren iOS Simulator ili je vaš iDevice povezan na vaš Mac preko USB-a (ili oboje!), spremni ste da počnete koristiti web inspektor na vašoj web lokaciji.
Na vašem Mac-u otvorite Safari i idite na odjeljak "Razvoj". Sada biste trebali vidjeti sve iDevices (virtuelne ili stvarne) koje ste povezali i pokrenuli sa svojim mac-om. Na slici ispod, videćete da imam dva uređaja u meniju, jedan je iOS simulator, a drugi je pravi iPhone povezan na moj Mac.
Da biste započeli provjeru web stranice, morate imati pokrenut mobilni Safari na vašem uređaju s jednom od otvorenih kartica za web stranicu. Ako nemate mobilni Safari, vidjet ćete poruku "Aplikacije koje se ne mogu pregledati".
Da biste započeli testiranje, jednostavno unesite URL stranice koju želite testirati u mobilnom Safariju, a zatim odaberite tu web lokaciju iz menija Razvoj. Možete početi provjeravati web lokacije na svom stvarnom iDevice ili iOS simulatoru. Kada odaberete stranicu, na stranici se pojavljuje plavi sloj koji označava vaš odabir.
Sa odabranom web lokacijom, Safari web inspektor će se otvoriti i omogućiti vam da počnete s provjerom vaše web stranice. Evo ga!
Zaključak
Sada kada imate Safari web inspektor na dohvat ruke, imate mnogo više kontrole pri izradi i otklanjanju grešaka na web lokacijama i web aplikacijama.
Ispod su primjeri nekih stvari koje sada možete učiniti kada otklanjate greške na mobilnim web lokacijama:
- Napravite promjene u HTML-u i CSS-u.
- Pogledajte kakav je učinak vaše web-lokacije/aplikacije, uključujući pregledavanje detalji O JavaScript događaji i mrežni zahtjevi.
- Otklanjanje grešaka u JavaScriptu pomoću tačaka prekida i drugih alata.
- Pogledajte upozorenja i greške.
- Otvorite konzolu.
- Potražite DOM.
- Pregledajte spremišta web mjesta.
Imate alate, idite i gradite!
Zna to u standardni pretraživač Safari je prisutan skriveni meni « Razvoj". U ovom članku ćemo govoriti o mogućnostima ovog odjeljka.
U kontaktu sa
Čemu služi meni Razvoj u Safariju na Macu?
Prije svega, ovaj meni će biti koristan za web programere kojima je potreban pristup kodu, raznim opcijama za prikaz stranica, onemogućavanje sadržaja itd. Postoji i nekoliko korisnih funkcija za obične korisnike.
Iz ovog menija možete brzo pokrenuti trenutna stranica u bilo kojem drugom pretraživaču instaliranom na Macu. Vrlo zgodno ako Safari ne može reproducirati nijedan multimedijalni sadržaj. Na primjer, ako želite gledati VR film (za naočale virtualne stvarnosti), tada je Google Chrome mnogo prikladniji za ovu svrhu.
Ne manje zanimljiva funkcijaće postati mod prikaza programski kod stranice. Zašto bi ovo moglo biti potrebno? Postoji kartica “ Resursi“, zahvaljujući čemu neće biti teško preuzeti sliku koja ne reagira na klik desni ključ miševi.
Funkcija brisanja ili onemogućavanja keš memorije je također korisna. A ponekad postoji potreba da se isključi prikaz slika ili skripti.
Web dizajneri će sami shvatiti alate menija " Razvoj", Ali želio bih posebno napomenuti mogućnost pokretanja režima responsive design... Prikazuje kvalitet optimizacije stranice web stranice, ovisno o tome na kojem uređaju će biti pokrenuta i u kojoj rezoluciji.
Kako da omogućim meni Razvoj u Safariju na Macu?
1 ... Pokrenite Safari. Na traci menija izaberite odeljak Safari -> Preferences ili pritisnite prečicu na tastaturi Komanda (⌘) +, (zarez).
2 ... Idi na " Supplementi».
3 ... Na samom dnu označite kvadratić pored stavke “ Prikaži meni programera na traci menija».
Sve! Nakon ovih radnji, pojavit će se traka menija nova sekcija « Razvoj».
V Safari pretraživač Uključeno je nekoliko alata za programere koji olakšavaju izgradnju i otklanjanje grešaka na vašoj web lokaciji. Na primjer, putem Safarija možete vidjeti kako će stranica izgledati na iPhoneu i iPadu. Da biste to uradili, potrebno je samo da navedete odgovarajući korisnički agent kroz meni Develop (Slika 7.51).
Rice. 7.51. Odabir korisničkog agenta
Safari također ima odličan alat za otklanjanje grešaka u HTML i CSS kodu koji se zove web inspektor. Da biste ga pozvali, izaberite meni Razvoj> Prikaži web inspektora ili koristite prečicu na tastaturi Ctrl + Alt + I. Ako nemate ovu stavku menija, idite na podešavanja pretraživača, izaberite panel sa dodacima i označite polje "Prikaži meni za razvoj na traci menija".
Web inspektor navodi resurse koji se nalaze na web stranici - dokumente, stilove, slike i skripte. Omogućava vam da vidite i pronađete kod web stranice i svojstva stila elemenata. Interfejs web inspektora prikazan je na sl. 7.52. Od sveg bogatstva programskih funkcija za izgled, zanima nas samo meni Elements.
Rice. 7.52. Web inspektor
Interfejs web inspektora liči na Firebug - HTML kod je prikazan u lijevom oknu aktuelni dokument, v desni panel- stil odabranog elementa. Bilo koji element na stranici može se odabrati ne samo putem koda, već uz pomoć alata, omogućava odabir elementa jednostavnim klikom na njega.
Skup stilova u inspektoru predstavljen je kao padajuća lista, što vam omogućava kompaktno uključivanje veliki volumen informacije. Prva stavka "Computed Style" (slika 7.53) sadrži stil elementa koji postavlja pretraživač na osnovu sopstveni stil, obračun za naslijeđe i dodana svojstva.
Rice. 7.53. Izračunati stil
Ovi stilovi su samo informativni, ne možete ništa promijeniti u ovom paragrafu. Boja, ako postoji, može se kliknuti i formatirati u heksadecimalno, RGB ili HSL.
Sljedeća stavka "Style Attribute" prikazuje inline stil, odnosno onaj koji je specificiran kroz atribut stila. Stavka će biti prazna ako ne postoji takav stil.
Osnovna grupa stavki pokazuje stil trenutnog elementa i povezanih elemenata (slika 7.54).
Rice. 7.54. Element stil
Bilo koja nekretnina na ovoj listi može se urediti klikom na nju. Univerzalna svojstva kao što su padding ili margina su prikazani kao padajuća lista, koja navodi pojedinačna svojstva, kao što su padding-left, padding-top, itd. Nasuprot svakom svojstvu nalazi se potvrdni okvir koji vam omogućava da brzo onemogućite svojstvo. Možete dodati novo pravilo koristeći meni skriven iza zupčanika na desnoj strani gornji ugao paneli (sl.7.55).
Rice. 7.55. Meni za dodavanje novih pravila
Stavka "Dimenzije" pokazuje blok model element - širina i visina elemenata, kao i vrijednosti paddinga, ivica, margina i pozicioniranja (slika 7.56).
Rice. 7.56. Dimenzije artikla
Samo treba uzeti u obzir da se ovdje pozivaju uvlake padding svojstva, a margine, tj. naprotiv, a ne u uobičajenom smislu.
Ova stavka se može koristiti ne samo za određivanje željenih vrijednosti, već i za njihovo postavljanje. Dovoljno je dvaput kliknuti na željenu vrijednost i unesite broj. Nema potrebe za specificiranjem jedinica, pikseli su standardno prihvaćeni.
Počevši od Safarija na iOS 6 i novijim verzijama kasnije verzije možete otkloniti greške u mobilnom web sadržaju sa svog Maca. Možete pogledati JavaScript greške, uredi HTML atributi, promijeniti CSS svojstva, baš kao kod razvoja za Safari na OS X. Ovaj odjeljak opisuje kako koristiti web inspektor za otklanjanje grešaka na web sadržaju na iOS-u.
Trebali biste provjeriti svoj web sadržaj na oba desktop sistema i različiti uređaji iOS. Ako nemate iOS uređaji za testiranje možete koristiti iOS Simulator iz iOS SDK-a. Budući da postoji razlika između web stranica na iOS-u i OS X-u, trebali biste posebno testirati svoj sadržaj na iPhone-u i iPad-u ili emulirati hardverski uređaj u simulatoru. Kada testirate u Safariju na bilo kojoj platformi, možete koristiti Web Inspector za otklanjanje grešaka na web sadržaju.
Omogućavanje Web Inspectora na iOS-u
Web inspektor sadrži vrijedne informacije o tome šta bi moglo poći po zlu u vašem web sadržaju. Iako je Web Inspector dostupan putem Safarija na OS X, možete ga koristiti za pregled sadržaja koji se učitava u Safariju ili bilo kojem UIWebView na iOS-u.
Omogućavanje Web inspektora na iOS-u
- Otvorite postavke
- Odaberite Safari
- Na samom dnu odaberite Dodaci
- Uključite Web Inspector
Pregledajte sa svog Mac-a
Kada je Web Inspector na iOS-u omogućen, povežite svoj uređaj na Mac koristeći USB kabl... Stavka menija se pojavljuje na OS X Safari razvojnom meniju, kao što je prikazano na slici ispod. Ako se naziv uređaja ne pojavi odmah u meniju Razvoj, pokušajte ponovo pokrenuti Safari i/ili ponovo spojiti kabel.
Naziv stavke menija će biti ili naziv svakog povezanog uređaja i/ili naziv simulatora. Podmeni sa dostupnim stranicama u iOS Safari... Aplikacija mora biti pokrenuta prednji plan da se pojavi u meniju Razvoj. Odaberite stranicu koja vas zanima i Web Inspector će se otvoriti u novom prozoru.
Sve funkcije Web Inspector-a na OS X, kao što je vrijeme HTTP zahtjevi, JavaScript profiliranje ili manipulacija DOM stablom su također dostupni na iOS-u. Jedina razlika je u tome što odabirom vaše web stranice iz menija Razvoj aktivno provjeravate web sadržaj na svom uređaju, a ne na Macu. Ako navigirate na drugu adresu na svom uređaju dok je Window Inspector još uvijek otvoren, primijetit ćete da će se provjereni podaci ponovo učitati kako bi odražavali stranicu na koju ste navigirali.
Pokazao je kako možete proširiti mogućnosti Safarija pomoću dodataka i uslužnih programa trećih strana. Međutim, vaše mogućnosti se tu ne završavaju. Možete pristupiti Safari opcijama koje su obično rezervirane za programere. Da biste to učinili, samo pokrenite program Terminal, unesite iz komandna linija samo jedna naredba, nakon koje ćete imati pristup cijelom svijetu novih mogućnosti – nevjerovatnih i neprocjenjivih.
Prilikom postavljanja Apple proizvodi prema ličnim potrebama, možete primijetiti da mnogi od predloženih recepata imaju i poleđina, odnosno troškovi. Na primjer, možete flešovati svoj telefon, ali tada otkrijete da naknadna ažuriranja softvera neće raditi. Možete zadržati svoje home folder na vašem iPodu, ali ćete morati da povežete svoj iPod svaki put kada budete trebali da koristite računar. Samo dva konkretnim primjerima, ali opšte pravilo izgleda otprilike ovako: šta više posla zahtijeva bilo kakvu modifikaciju, veći je trzaj. Ilustrujmo to još jednim primjerom: sa Terminalom možete učiniti prava čuda, ali za to morate naučiti impresivan broj naredbi i njihovih opcija.
Možda jedini izuzetak od ovog pravila je meni Debug u Safari pretraživaču. Aktiviranje Debug menija u Safariju je izuzetno jednostavno, prednosti su bezbrojne i nema negativnih nuspojava. Odnosno, sa hakerske tačke gledišta, ovaj recept nudi samo prednosti. S obzirom na njegovu jednostavnost, hajde da ga primenimo u praksi. Kao što je ranije spomenuto, sve što trebate učiniti je pokrenuti aplikaciju Terminal i unijeti sljedeću naredbu iz komandne linije:
1defaults write com.apple.Safari IncludeDebugMenu 1Ništa se ne dešava u aplikaciji Terminal nakon pokretanja ove naredbe. Ako je istovremeno otvoren pretraživač Safari, tada vam se na prvi pogled može učiniti da komanda nije imala efekta. Međutim, nije. Da vidite promjene napravljene kao rezultat pokretanja naredbe, zatvorite Safari i zatim ga ponovo pokrenite - i vidjet ćete da se pojavljuje traka menija novi tim- Otklanjanje grešaka (sl. 2.14).
Čim aktivirate meni Debug, videćete da se ovaj meni otvara mnogo ranije nedostupne opcije Safari. Većina opcija je od interesa samo za programere. Međutim, neki od njih bi vam mogli zaista ugoditi. Želite li znati, na primjer, koliko se resursa troši na surfanje Internetom sa Safarijem? Najlakši način da dobijete odgovor na ovo pitanje je da koristite opciju Start Stress Test iz menija Debug. Kada odaberete ovu naredbu, Safari će otići na http://del.icio.us i početi učitavati stranicu po stranicu, dok će pratiti količinu posla koji je obavljen (slika 2.15).
Ovo omogućava više od samo procjene obima saobraćaja Safarija. Za one korisnike koji su previše lijeni da sami traže zanimljive web stranice, Safari stres test će uvijek pronaći nekoliko stranica koje bi mogle biti zanimljive. Da biste završili test stresa, ponovo otvorite meni Debug i izaberite komandu Stop Stress Test. Manje zanimljiva, ali ništa manje korisna u poređenju sa Safari testom stresa, je mogućnost odabira korisničkog agenta iz menija Debug. Ovo će vam omogućiti da koristite Safari tako što ćete imitirati servere kao drugi pretraživač. Na prvi pogled, čini se da je ova karakteristika problematična funkcija sumnjive korisnosti. Zašto se truditi da se serverima predstavlja kao drugi pretraživač?
Na kraju krajeva, ponosni ste što jeste mac korisnik! Ali ne treba žuriti sa zaključcima. Prije ili kasnije naići ćete na stranicu koja zahtijeva korištenje od svih posjetitelja Internet Explorer... Ako takvom serveru otvoreno kažete da koristite Safari, možete pomisliti da nemate sreće - biće vam odbijena usluga. Ako se Safari pretvara da je Windows MSIE 6.0, tada će vam biti dozvoljeno da se registrujete i dobijete željenu uslugu, jer će stranica koja pruža uslugu biti zavedena i "vjerovati" da ste jedan od Windows klijenti(sl. 2.16).
Međutim, to ne znači nužno da će stranica nekim čudom početi ispravno raditi sa Safarijem. Ako web lokacija koristi ActiveX, tada Safari neće moći raditi s tom web lokacijom, bez obzira koliko dobro aplikacija maskira svoj identitet. Međutim, postoje mnoge stranice koje podržavaju samo Internet Explorer (IE) zbog lijenosti ili nemara programera koda. Ovo se, naglašavamo, ne događa zato što Safari ne može pravilno generirati informacije i komunicirati sa serverima, već zato što je webmaster otišao na lak način i odlučio da bi mu bilo lakše da podržava samo Internet Explorer. U takvim slučajevima će vam pomoći zamjena korisničkog agenta preko menija Debug, što će vam omogućiti pristup stranicama koje su vam ranije bile nedostupne.
Puno više se može postići pomoću korisničkog agenta. Na primjer, ako želite postići više brzi pregled, možete reći serverima da koristite Mobile Safari 1.0 - tako se lažno predstavljate Korisnik iPhonea... Neke stranice otvorene samo za Mobilni korisnici Safari (klasični primjer je http://reader.mac.com/) i mnoge druge stranice automatski pomjeraju korisnike Mobile Safarija na stranice sa nižim propusnim opsegom. Na primjer, Amazon preusmjerava korisnike Mobile Safarija na stranicu jednostavnijeg izgleda (slika 2.17).
Ako vam nikakvi trikovi korisničkog agenta ne mogu pomoći da postignete željeni rezultat, meni Debug će vam i dalje barem uštedjeti muke traženja odgovarajućeg pretraživača u folderu Aplikacije. Ako se nađete na problematičnoj stranici koja se ne otvara sa Safarijem, odaberite iz menija Komande za otklanjanje grešaka→ Otvori stranicu sa…, a zatim izaberite sa liste odgovarajući pretraživač(sl.2.18).
Međutim, mogućnosti koje pruža meni Debug ne završavaju trikovima korisničkog agenta. Kada aktivirate meni za otklanjanje grešaka, imate na raspolaganju neverovatno svestran i svestran alat za inspekciju sajta. Uz njegovu pomoć možete istražiti bilo koji element stranice koji vas zanima, a prikaz koda će u potpunosti odražavati nivo ugniježđenja, a koristit će i isticanje u boji elemenata sintakse za dodatnu pogodnost. Da biste pokrenuli Web Inspector za cijelu stranicu, potrebno je ići na traku menija (Debug → Show Web Inspector), ali ako vas ne zanima cijela stranica, već samo neki njeni elementi, onda samo trebate zadržite pokazivač iznad potreban element, kliknite desnim tasterom miša i izaberite iz kontekstni meni Naredba Inspect Element. Videćete tačno onaj deo stranice koji ste trebali da istražite (slika 2.19).
Konačno, meni Debug pruža mnoge druge opcije. Na primjer, možete isključiti podršku za RSS ako čitate RSS feedove. Aplikacija Mail ili nezavisnim sredstvima RSS Readers kao što je NetNewsWire. Osim toga, pomoću menija Debug možete postići zanimljivo vizuelni efekti- na primjer, učinite prozor Safari transparentnim (slika 2.20).
Postoji još mnogo zanimljivih opcija, koje će, međutim, biti od većeg interesa za programere - na primjer, curenje memorije (world leaks), profiliranje (profiliranje) itd. Međutim, jedna od korisne opcije koji se mogu naći u meniju Debug su velika lista Safari prečice na tastaturi. Ove prečice na tastaturi su navedene u datoteci za koju malo korisnika zna. Štaviše, ako ih pravilno koristite, prečice na tastaturi vam mogu uveliko uštedeti vreme pri intenzivnom radu sa pretraživačem (slika 2.21).
Ako ne namjeravate da aktivirate meni za otklanjanje grešaka, ali i dalje trebate pristup svim ovim praktičnim prečicama na tastaturi, unesite sljedeću putanju datoteke u adresnu traku preglednika: file: ///Applications/Safari.app/Contents/Resources/ Shortcuts. html i označite ga. Datoteka prečice na tastaturi je lokalni fajl pohranjeno u Safari paketu, ali mu je mnogo lakše pristupiti preko pretraživača nego gubiti vrijeme uzastopnim širenjem foldera i paketa da biste pronašli informacije koje su vam potrebne.
Nakon što ste aktivirali meni za otklanjanje grešaka u Safariju, logično bi bilo da se zapitate da li je ovo skrivena prilika iu drugima Apple aplikacije... Slažem se, bilo bi sjajno kada biste mogli tretirati bilo koju aplikaciju na način na koji to rade programeri. Nažalost, nemaju sve aplikacije skriveni meni za otklanjanje grešaka, iako neke imaju. Na primjer, isprobajte istu operaciju kao što je opisano u ovom receptu za aplikaciju iCal — također ćete pronaći izbornik za otklanjanje grešaka, iako s manje funkcionalnosti od Safarija. Na kraju, u zaključku, treba reći da ako želite ponovo sakriti meni za otklanjanje grešaka, samo trebate pokrenuti aplikaciju Terminal i izdati sljedeću naredbu:
1defaults upiši com.apple.Safari IncludeDebugMenu 0
