Fiind un dezvoltator de web în lumea de azi înseamnă a susține o mulțime de dispozitive și platforme, care uneori se dovedesc a fi o sarcină descurajantă. Chiar și cu cel mai bine conceput cod care respectă cele mai recente standarde web, puteți totuși să constatați că porțiunile de pe site-ul dvs. nu ar putea să arate sau să acționeze așa cum doriți pe anumite dispozitive sau rezoluții. Atunci când se confruntă cu provocarea de a sprijini o astfel de gamă largă de scenarii, având instrumentele de simulare potrivite la dispoziția dumneavoastră poate fi de neprețuit.
Dacă sunteți unul dintre mulții programatori care folosesc un Mac, setul de instrumente pentru dezvoltatori de la Safari a venit mereu la îndemână. Odată cu lansarea Safari 9, această latură a funcționalității sa extins considerabil, în principal datorită modului de design receptiv, care vă permite să previzualizați modul în care site-ul dvs. va reda la diferite rezoluții ale ecranului, precum și pe diferite dispozitive iPad, iPhone și iPod touch.
Acest tutorial detaliază cum să activați modul de design receptiv, precum și cum să îl utilizați pentru nevoile dvs. de dezvoltare.
Safari Preferințe
Mai întâi, deschideți browserul Safari.
Click pe Safari din meniul browserului, situat în partea de sus a ecranului. Când apare meniul drop-down, selectați Preferințe opțiune încorporată în exemplul prezentat.
Notă: Puteți utiliza următoarea comandă rapidă de la tastatură în locul elementului de meniu menționat mai sus: COMANDA + COMMA (,)
02 din 05Afișați meniul de dezvoltare
Dialogul preferințelor Safari ar trebui afișat acum, suprapunând fereastra browserului. Mai întâi, faceți clic pe Avansat pictograma reprezentată de o unelte și situată în colțul din dreapta sus al ferestrei.
Preferințele avansate ale browserului ar trebui să fie acum vizibile. În partea de jos este o opțiune însoțită de o casetă de selectare, etichetate Afișați meniul Dezvoltare din bara de meniu și a circulat în exemplul de mai sus. Dați clic pe o dată pe caseta de selectare pentru a activa acest meniu.
03 din 05Introduceți modul de proiectare receptiv
O nouă opțiune ar trebui să fie acum disponibilă în meniul Safari, situat în partea de sus a ecranului, etichetat Dezvolta. Faceți clic pe această opțiune.
Când apare meniul vertical, selectați Introduceți modul de proiectare receptivîn exemplul prezentat.
Notă: Puteți utiliza următoarea comandă rapidă de la tastatură în locul elementului de meniu menționat mai sus:OPȚIUNE + COMANDĂ + R
04 din 05Mod responsiv de proiectare
Pagina web activă trebuie afișată acum în modul Responsabil de proiectare, așa cum se arată în exemplul de mai sus. Prin selectarea unuia dintre dispozitivele iOS enumerate, cum ar fi iPhone 6 sau una dintre rezoluțiile desemnate ale ecranului, cum ar fi 800 x 600, puteți vizualiza imediat modul în care va afișa pagina pe respectivul dispozitiv sau în acea rezoluție a afișajului.
Pe lângă dispozitivele și rezoluțiile afișate, puteți să instruiți și Safari să simuleze un alt agent utilizator - cum ar fi unul dintr-un browser diferit - făcând clic pe meniul derulant afișat direct deasupra pictogramelor de rezoluție.
05 din 05Dezvoltați meniul: Alte opțiuni
În plus față de modul de design receptiv, meniul Safari 9's Develop oferă multe alte opțiuni utile, dintre care unele sunt enumerate mai jos.
- Deschideți pagina cu: Vă permite să deschideți pagina Web activă în orice alt browser instalat în prezent pe Mac.
- Agent utilizator: Schimbarea agentului utilizator determină ca serverele Web să identifice browserul dvs. ca pe altceva decât Safari 9.
- Conectați inspectorul web: Safari 9 Web Inspector afișează toate resursele unei pagini web, oferind posibilitatea de a citi informații CSS, metrici DOM și structură, precum și codul sursă nativ.
- Afișați Consola de eroare: Una dintre cele mai utilizate opțiuni din meniul Develop, această consolă afișează erori și avertismente JavaScript, HTML și XML.
- Afișați sursa paginii: Permite vizualizarea și căutarea codului sursă al paginii Web active.
- Afișați resursele paginii: Selectarea acestei opțiuni afișează documente, scripturi, CSS și alte resurse din pagina curentă.
- Afișați Editorul de snippeturi: Oferă posibilitatea de a edita și executa fragmente de cod, spre deosebire de o pagină completă. Această caracteristică este foarte utilă dintr-o perspectivă de testare.
- Afișați Extensiu Builder: Vă permite să construiți propriile extensii Safari, ambalând-vă codul în consecință și adăugând metadate.
- Începeți înregistrarea cronologică: Înregistrează un număr de elemente, inclusiv solicitări de rețea, execuție JavaScript, randare pagină și alte evenimente pentru o perioadă definită de utilizator, toate vizibile în cadrul inspectorului WebKit.
- Cache-uri goale: Dacă faceți clic pe această opțiune, veți șterge toate memoria cache stocată în Safari, nu doar fișierele cache standard ale site-ului.
- Dezactivați cache-urile: Cu cache-ul dezactivat, resursele sunt descărcate de pe un site de fiecare dată când se face o solicitare de acces spre deosebire de utilizarea cache-ului local.
- Permiteți JavaScript din câmpul Căutare inteligentă: Dezactivat în mod prestabilit din motive de securitate, această funcție vă permite să introduceți adrese URL care conțin JavaScript în bara de adrese a Safari.
- Tratați certificatele SHA-1 ca nesigure: Scurt pentru Algoritmul Secure Hash, funcția hash SHA-1 sa dovedit a fi mai puțin sigură decât sa crezut inițial, prin urmare adăugarea acestei opțiuni în Safari 9.
