Începând cu Safari pe iOS 6 și versiuni ulterioare versiuni ulterioare puteți depana conținutul web mobil de pe Mac. Puteți vizualiza erori JavaScript, Editați | × Atributele HTML, Schimbare Proprietăți CSS, la fel ca atunci când dezvoltați pentru Safari pe OS X. Această secțiune descrie cum să utilizați inspectorul web pentru a depana conținutul web pe iOS.
Ar trebui să vă verificați conținutul web pe ambele sisteme desktop și diferite dispozitive iOS. Daca nu ai dispozitive iOS pentru testare, puteți folosi iOS Simulator din iOS SDK. Deoarece există o diferență între paginile web pe iOS și OS X, ar trebui să testați în mod special conținutul pe iPhone și iPad sau să emulați dispozitiv hardwareîn simulator. Când testați în Safari pe orice platformă, puteți utiliza Web Inspector pentru a depana conținutul web.
Activarea Web Inspector pe iOS
Inspectorul web conține informatie pretioasa despre ce ar putea merge prost în conținutul dvs. web. Chiar dacă Web Inspector este disponibil prin Safari pe OS X, îl puteți folosi pentru a inspecta conținutul care se încarcă în Safari sau orice UIWebView pe iOS.
Activarea Web Inspector pe iOS
- Deschideți setările
- Selectați Safari
- În partea de jos, selectați Suplimente
- Activați Web Inspector
Inspectați de pe Mac
Când Web Inspector pe IOS este activat, conectați dispozitivul la Mac folosind cablu USB... În meniu apare un element de meniu Dezvoltare Safari pe OS X, așa cum se arată în figura de mai jos. Dacă numele dispozitivului nu apare imediat în meniul Dezvoltare, încercați să reporniți Safari și/sau să reconectați cablul.
Numele elementului de meniu va fi fie numele fiecărui dispozitiv conectat și/sau numele simulatorului. Submeniu cu pagini disponibile în iOS Safari... Aplicația trebuie să ruleze prim plan să apară în meniul Dezvoltare. Selectați pagina care vă interesează și Web Inspector se va deschide într-o fereastră nouă.
Toate caracteristicile Web Inspector pe OS X, cum ar fi timpul solicitări HTTP, profilarea JavaScript sau manipularea arborelui DOM sunt, de asemenea, disponibile pe iOS. Singura diferență este că, selectând pagina dvs. web din meniul Dezvoltare, verificați în mod activ conținutul web de pe dispozitiv, nu de pe Mac. Dacă navigați la o altă adresă pe dispozitiv cu Window Inspector încă deschis, veți observa că datele inspectate se vor reîncărca pentru a reflecta pagina la care ați navigat.
V browser Safari Sunt incluse mai multe instrumente pentru dezvoltatori pentru a facilita construirea și depanarea site-ului dvs. De exemplu, prin Safari, puteți vedea cum va arăta site-ul pe iPhone și iPad. Pentru a face acest lucru, trebuie doar să specificați agentul utilizator corespunzător prin meniul Dezvoltare (Fig. 7.51).
Orez. 7.51. Alegerea unui agent utilizator
Safari are, de asemenea, un instrument excelent pentru depanarea codului HTML și CSS, numit inspector web. Pentru a-l apela, selectați meniul Dezvoltare> Show Web Inspector sau utilizați comanda rapidă de la tastatură Ctrl + Alt + I. Dacă nu aveți acest element de meniu, mergeți la setările browserului, selectați panoul Add-ons și bifați caseta „Afișați meniul Dezvoltare în bara de meniu”.
Inspectorul web listează resursele găsite pe pagina web - documente, foi de stil, imagini și scripturi. Vă permite să vedeți și să găsiți codul paginii web și proprietățile de stil ale elementelor. Interfața inspectorului web este prezentată în Fig. 7,52. Dintre toată bogăția caracteristicilor programului pentru aspect, ne interesează doar meniul Elemente.
Orez. 7,52. inspector web
Interfața inspectorului web seamănă cu Firebug - codul HTML este afișat în panoul din stânga document curent, v panoul din dreapta- stilul elementului selectat. Orice element de pe pagină poate fi selectat nu numai prin cod, ci cu ajutorul unui instrument, vă permite să selectați un element prin simplul clic pe el.
Setul de stiluri din inspector este prezentat ca o listă derulantă, acest lucru vă permite să includeți în mod compact volum mare informație. Primul element „Stil calculat” (Fig. 7.53) conține stilul elementului care setează browserul pe baza propriul stil, luând în considerare moștenirea și proprietățile adăugate.
Orez. 7,53. Stilul calculat
Aceste stiluri sunt furnizate doar cu titlu informativ, nu puteți modifica nimic în acest paragraf. O culoare, dacă este prezentă, poate fi făcută clic pe și formatată în hexazecimal, RGB sau HSL.
Următorul articol „Atribut de stil” arată stilul inline, adică cel care este specificat prin atributul de stil. Articolul va fi gol dacă nu există un astfel de stil.
Grupul de articole subiacent arată stilul elementului curent și elementele aferente (Fig. 7.54).
Orez. 7,54. Stilul elementului
Orice proprietate din această listă poate fi editată făcând clic pe ea. Proprietăți universale precum padding sau margin sunt afișate ca o listă derulantă, care listează proprietăți individuale, cum ar fi padding-left, padding-top etc. Vizavi de fiecare proprietate este o casetă de selectare care vă permite să dezactivați rapid proprietatea. Puteți adăuga o nouă regulă folosind meniul ascuns în spatele roții din dreapta colțul de sus panouri (fig.7.55).
Orez. 7.55. Meniu pentru adăugarea de reguli noi
Elementul „Dimensiuni” demonstrează model bloc element - lățimea și înălțimea elementelor, precum și valorile de umplutură, margini, margini și poziționare (Fig. 7.56).
Orez. 7,56. Dimensiunile articolului
Trebuie doar să țineți cont de faptul că aici se numesc indentări proprietăți de umplutură, iar marginile, i.e. dimpotrivă, și nu în sensul obișnuit.
Acest element poate fi folosit nu numai pentru a determina valorile dorite, ci și pentru a le seta. Este suficient să faceți dublu clic pe valoarea dorităși introduceți un număr. Nu este nevoie să specificați unități, pixelii sunt acceptați implicit.
Știe că în browser standard Safari este prezent meniu ascuns « Dezvoltarea". În acest articol, vom vorbi despre capacitățile acestei secțiuni.
In contact cu
Pentru ce este meniul Dezvoltare din Safari pe Mac?
În primul rând, acest meniu va fi util pentru dezvoltatorii web care au nevoie de acces la cod, diverse opțiuni pentru afișarea paginilor, dezactivarea conținutului etc. Există, de asemenea, câteva funcții utile pentru utilizatorii obișnuiți.
Din acest meniu puteți lansa rapid pagina curentaîn orice alt browser instalat pe Mac. Foarte la îndemână dacă Safari nu poate reda niciun conținut multimedia. De exemplu, dacă doriți să vizionați un film VR (pentru ochelari realitate virtuala), atunci Google Chrome este mult mai potrivit pentru acest scop.
Nu mai puțin functie interesanta va deveni modul de afișare codul programului pagini. De ce ar putea fi necesar acest lucru? Există o filă „ Resurse„, Datorită căreia nu va fi dificil să descărcați o imagine care nu răspunde la clic tasta dreapta soareci.
Este utilă și funcția de ștergere sau dezactivare a memoriei cache. Și uneori este nevoie să dezactivați afișarea imaginilor sau a scripturilor.
Designerii web vor descoperi ei înșiși instrumentele de meniu " Dezvoltarea", Dar aș dori să notez separat posibilitatea de a porni modul design receptiv... Afișează calitatea optimizării paginii site-ului web, în funcție de dispozitivul pe care va fi lansat și cu ce rezoluție.
Cum activez meniul Dezvoltare în Safari pe Mac?
1 ... Lansați Safari. În bara de meniu, selectați o secțiune Safari -> Preferințe sau apăsați comanda rapidă de la tastatură Comanda (⌘) +, (virgulă).
2 ... Mergi la " Suplimente».
3 ... În partea de jos, bifați caseta de lângă elementul „ Afișați meniul Dezvoltator în bara de meniu».
Tot! După aceste acțiuni, se va afișa bara de meniu noua sectiune « Dezvoltarea».
S-a arătat cum să se extindă Caracteristici Safari folosind pluginuri și utilitare terțe. Cu toate acestea, posibilitățile tale nu se opresc aici. Puteți accesa opțiunile Safari care sunt de obicei rezervate dezvoltatorilor. Pentru a face acest lucru, trebuie doar să porniți programul Terminal, intrați din Linie de comanda doar o singură comandă, după care vei avea acces la o întreagă lume de noi oportunități – incredibile și neprețuite.
La configurare Produse Appleîn funcție de nevoile personale, puteți observa că multe dintre rețetele sugerate au și reversul, adică costuri. De exemplu, puteți să vă flash telefonul, dar apoi să găsiți actualizările ulterioare software nu va funcționa. Îți poți păstra folderul de acasă pe iPod-ul dvs., dar va trebui să vă conectați iPod-ul de fiecare dată când trebuie să utilizați computerul. Sunt doar două exemple concrete, dar regula generala arata cam asa: ce mai multă muncă necesită orice modificare, cu cât recul este mai mare. Să ilustrăm asta cu un alt exemplu: poți face adevărate minuni cu Terminalul, dar pentru asta trebuie să înveți un număr impresionant de comenzi și opțiunile acestora.
Poate că singura excepție de la această regulă este meniul Depanare din browserul Safari. Activarea meniului Debug în Safari este extrem de simplă, beneficiile sunt nenumărate și nu există efecte secundare negative. Adică din punctul de vedere al hackerului, această rețetă oferă doar beneficii. Având în vedere simplitatea ei, să o punem în practică. După cum am menționat mai devreme, tot ce trebuie să faceți este să lansați aplicația Terminal și să introduceți următoarea comandă din linia de comandă:
1Scriu implicit com.apple.Safari IncludeDebugMenu 1Nu se întâmplă nimic în aplicația Terminal după rularea acestei comenzi. Dacă, în același timp, browserul Safari a fost deschis, atunci, la prima vedere, vi se poate părea că comanda nu a avut efect. Cu toate acestea, nu este. Pentru a vedea modificările făcute ca urmare a rulării comenzii, închideți Safari și apoi reporniți-l - și veți vedea că apare bara de meniu echipa noua- Depanare (fig. 2.14).
De îndată ce activați meniul Debug, veți descoperi că acest meniu vă deschide cu multe mai devreme opțiuni indisponibile Safari. Cele mai multe dintre opțiuni sunt de interes doar pentru dezvoltatori. Cu toate acestea, unele dintre ele ar putea să vă placă cu adevărat. Doriți să știți, de exemplu, câte resurse sunt consumate navigând pe Web cu Safari? Cel mai simplu mod de a obține un răspuns la această întrebare este să utilizați opțiunea Start Stress Test din meniul Debug. Odată ce ați selectat această comandă, Safari va merge la http://del.icio.us și va începe să încarce pagină cu pagină, în timp ce urmărește cantitatea de muncă care a fost făcută (Figura 2.15).
Acest lucru permite mai mult decât estimarea volumului de trafic din Safari. Pentru acei utilizatori cărora le este prea lene să caute singuri pagini web interesante, testul de stres Safari va găsi întotdeauna câteva pagini care ar putea fi de interes. Pentru a încheia testul de stres, deschideți din nou meniul Depanare și selectați comanda Oprire test de stres. Mai puțin interesantă, dar nu mai puțin utilă în comparație cu testul de stres Safari, este capacitatea de a selecta un user agent din meniul Debug. Acest lucru vă va permite să utilizați Safari prin uzurparea identității serverelor ca un browser diferit. La prima vedere, această caracteristică pare a fi o funcție problematică de utilitate dubioasă. De ce să vă deranjați să vă prezentați serverelor ca un alt browser?
La urma urmei, ești mândru că ești utilizator mac! Dar nu ar trebui să se grăbească să tragă concluzii. Mai devreme sau mai târziu veți întâlni un site care necesită folosirea tuturor vizitatorilor Internet Explorer... Dacă spuneți deschis unui astfel de server că utilizați Safari, puteți crede că nu aveți noroc - vi se va refuza serviciul. Dacă Safari se pretinde a fi Windows MSIE 6.0, atunci vi se va permite să vă înregistrați și să primiți serviciul dorit, deoarece site-ul care furnizează serviciul va fi indus în eroare și va „crede” că sunteți unul dintre Clienți Windows(fig. 2.16).
Cu toate acestea, acest lucru nu înseamnă neapărat că site-ul va începe miraculos să funcționeze corect cu Safari. Dacă un site folosește ActiveX, atunci Safari nu va putea lucra cu acel site, indiferent cât de bine îi maschează aplicația identitatea. Cu toate acestea, există multe site-uri care acceptă doar Internet Explorer (IE) din cauza lenei sau neglijenței dezvoltatorilor de cod. Acest lucru, subliniem, nu se întâmplă pentru că Safari nu poate reda corect informațiile și nu poate interacționa cu serverele, ci pentru că webmasterul a mers la calea ușoarăși a decis că i-ar fi mai ușor să accepte doar Internet Explorer. În astfel de cazuri, înlocuirea agentului utilizator prin meniul Depanare vă va ajuta, ceea ce vă va permite să accesați site-uri care înainte vă erau inaccesibile.
Mult mai multe pot fi realizate cu un user agent. De exemplu, dacă vrei să obții mai mult vizualizare rapidă, puteți spune serverelor că utilizați Mobile Safari 1.0 - astfel uzurparea identitatea utilizator de iPhone... Unele pagini se deschid doar pentru Utilizatori de telefonie mobilă Safari (exemplul clasic este http://reader.mac.com/) și multe alte site-uri mută automat utilizatorii Mobile Safari către pagini cu lățime de bandă mai mică. De exemplu, Amazon redirecționează utilizatorii Mobile Safari către o pagină cu aspect mai simplu și mai puțin consumatoare de lățime de bandă (Figura 2.17).
Dacă niciun truc de agent de utilizator nu vă poate ajuta să obțineți rezultatul dorit, meniul Depanare vă va scuti cel puțin de bătaia de cap de a căuta un browser potrivit în folderul Aplicații. Dacă vă aflați pe un site problematic care nu se va deschide cu Safari, alegeți din meniu Comenzi de depanare→ Deschideți pagina cu... și apoi selectați din listă browser adecvat(fig.2.18).
Cu toate acestea, capacitățile oferite de meniul Debug nu se termină cu trucuri de agent de utilizator. Când activați meniul Debug, aveți la dispoziție un instrument uimitor de versatil și versatil de inspecție a site-ului. Cu ajutorul acestuia, puteți explora orice element al paginii care vă interesează, iar afișarea codului va reflecta pe deplin nivelul de imbricare și va folosi, de asemenea, evidențierea în culori a elementelor de sintaxă pentru un plus de confort. Pentru a lansa Web Inspector pentru întreaga pagină, trebuie să mergeți la bara de meniu (Debug → Show Web Inspector), dar dacă nu sunteți interesat de întreaga pagină, ci doar de unele dintre elementele acesteia, atunci trebuie doar să plasați cursorul peste element necesar, faceți clic Click dreapta mouse-ul și alegeți dintre meniul contextual Comanda Inspectați element. Veți vedea exact partea din pagină pe care trebuia să o explorați (Fig. 2.19).
În cele din urmă, meniul Debug oferă multe alte opțiuni. De exemplu, puteți dezactiva suportul RSS dacă citiți fluxuri RSS. Aplicația de e-mail sau mijloace independente Cititoare RSS precum NetNewsWire. În plus, cu meniul Debug puteți obține lucruri interesante efecte vizuale- de exemplu, faceți fereastra Safari transparentă (Fig. 2.20).
Există mult mai multe opțiuni interesante, care, totuși, vor prezenta un interes mai mare pentru dezvoltatori - de exemplu, scurgeri de memorie (scurgeri în lume), profilare (profilare) etc. Cu toate acestea, una dintre cele mai opțiuni utile care pot fi găsite în meniul Debug sunt lista mare Comenzi rapide de la tastatură Safari. Aceste comenzi rapide de la tastatură sunt listate într-un fișier despre care puțini utilizatori îl cunosc. Mai mult, dacă le utilizați corect, comenzile rapide de la tastatură vă pot economisi mult timp atunci când lucrați intens cu browserul (Fig. 2.21).
Dacă nu intenționați să activați meniul Debug, dar încă aveți nevoie de acces la toate aceste comenzi rapide de la tastatură, introduceți următoarea cale a fișierului în bara de adrese a browserului: fișier: ///Applications/Safari.app/Contents/Resources/ Shortcuts. html și marcați-l. Fișierul comenzilor rapide de la tastatură este fișier local stocate în pachetul Safari, dar este mult mai ușor să îl accesați printr-un browser decât să pierdeți timpul extinzând secvențial folderele și pachetele pentru a găsi informațiile de care aveți nevoie.
După ce ați activat meniul Debug în Safari, ar fi logic să întrebați dacă acest lucru oportunitate ascunsă iar în altele Aplicații Apple... De acord, ar fi grozav dacă ați putea trata orice aplicație așa cum o fac dezvoltatorii. Din păcate, nu toate aplicațiile au un meniu Debug ascuns, deși unele au. De exemplu, încercați aceeași operațiune descrisă în această rețetă pentru aplicația iCal - veți găsi și meniul Depanare, deși cu mai puține funcționalități decât Safari. În sfârșit, în concluzie, trebuie spus că dacă doriți să ascundeți din nou meniul Debug, trebuie doar să lansați aplicația Terminal și să lansați următoarea comandă:
1 implicit scrie com.apple.Safari IncludeDebugMenu 0
