01 din 06
Activați și utilizați modul de design receptiv în Safari 9
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 din site-ul dvs. nu ar putea să pară 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 al Safari a venit întotdeauna la îndemână. Odată cu lansarea Safari 9, această latură a acestei funcționalități sa extins considerabil, în special datorită Modului de Design Responsabil, 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.
Mai întâi, deschideți browserul Safari.
02 din 06
Safari Preferințe
Faceți clic pe Safari din meniul browserului, situat în partea de sus a ecranului. Când apare meniul drop-down, selectați opțiunea Preferințe_ învârtită în exemplul de mai sus.
Rețineți că puteți utiliza următoarea comandă rapidă de la tastatură în locul elementului de mențiune menționat mai sus: COMMAND + COMMA (,)
03 din 06
Afiș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 pictograma Complex_ 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 bifare, etichetată cu meniul Afișați evoluția din bara de meniu și este înconjurată în exemplul de mai sus. Dați clic pe o dată pe caseta de selectare pentru a activa acest meniu.
04 din 06
Introduceț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, numit Dezvoltare . Faceți clic pe această opțiune. Când apare meniul drop-down, selectați Modul de design receptiv _ cuplat în exemplul de mai sus.
Rețineți că puteți utiliza următoarea comandă rapidă de la tastatură în locul elementului de meniu menționat mai sus: OPTION + COMMAND + R
05 din 06
Mod responsiv de proiectare
Pagina Web activă ar trebui să fie 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.
06 din 06
Dezvoltați meniul: Alte opțiuni
În plus față de modul de design receptiv, meniul Safari 9's Develop oferă multe alte opțiuni utile, unele care sunt enumerate mai jos.
- Deschidere pagină cu: vă permite să deschideți pagina Web activă în orice alt browser instalat pe Mac.
- Agent de Agent: Schimbarea agentului utilizator determină ca serverele Web să identifice browserul dvs. ca pe altceva decât Safari 9.
- Conectați inspectorul web: Inspectorul Web al Safari 9 afișează toate resursele paginii Web, oferind posibilitatea de a citi informații CSS, metrici și structură DOM, precum și codul sursă nativ.
- Afișați Consola de eroare: una dintre cele mai utilizate opțiuni din meniul de dezvoltare, această consolă afișează erori și avertismente JavaScript, HTML și XML.
- Afișare sursă pagină: Vă permite să vizualizați și să căutați codul sursă al paginii Web active.
- Afișarea resurselor pentru pagini: selectarea acestei opțiuni afișează documente, script-uri, 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 cereri de rețea, executare JavaScript, redare pagină și alte evenimente pentru o perioadă definită de utilizator, toate vizibile în cadrul inspectorului WebKit.
- Cache-uri goale: Dând clic pe această opțiune, se șterge toate cache-urile stocate în Safari, nu doar fișierele cache standard ale site-ului web.
- Dezactivarea cache-urilor: 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 implicit 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 a crezut inițial, prin urmare adăugarea acestei opțiuni în Safari 9.
Citire asemănătoare
Dacă ați descoperit acest tutorial util, asigurați-vă că verificați celelalte instrucțiuni despre Safari 9.
- Modul de administrare a notițelor de tip push
- Cum să exportați o pagină Web într-un fișier PDF
- Cum se configurează extensiile Safari 9 pentru actualizarea automată
- Cum se utilizează caracteristica Site-uri fixate