Internet

Cum se activează și se utilizează modul de proiectare receptivă în Safari

Autor: Louise Ward
Data Creației: 8 Februarie 2021
Data Actualizării: 15 Mai 2024
Anonim
Safari Development Tools - Responsive Design Mode
Video: Safari Development Tools - Responsive Design Mode

Conţinut

Accesați instrumentele pentru dezvoltatori în browserul Apple Apple

Asigurarea faptului că site-urile web și aplicațiile web acceptă o serie de dispozitive și platforme este o sarcină esențială pentru dezvoltatorii web. Browserul web Safari de la Apple include un mod de Responsive Design care vă permite să previzualizați modul în care site-ul dvs. va fi redat la diverse rezoluții ale ecranului și la diferite versiuni de iPad, iPhone și iPod touch.

Instrucțiunile din acest articol se aplică Safari 13 pentru macOS. Modul Responsive Design nu este disponibil în versiunea Windows.

Cum să activați modul de proiectare receptivă în Safari

Pentru a activa instrumentele de dezvoltatori Safari și modul de proiectare receptivă:

  1. Selectați Safari > Preferințe în bara de instrumente Safari.


    Puteți utiliza, de asemenea, comanda rapidă de la tastatură Comanda+Virgulă (,) pentru a accesa meniul Preferințe.

  2. În meniul Preferințe, selectați butonul Avansat filați și bifați caseta de lângă Afișați meniul Dezvoltați în bara de meniu. O nouă opțiune ar trebui să fie disponibilă acum în bara de instrumente Safari din partea de sus a ecranului.

  3. Selectați Dezvolta > Accesați modul de proiectare receptivă în bara de instrumente Safari.


    Puteți utiliza, de asemenea, comanda rapidă de la tastatură Opțiune+Comanda+R pentru a intra în modul Responsive Design.

  4. Pagina web activă ar trebui să fie acum afișată în modul Responsive Design. În partea de sus a paginii, alegeți un dispozitiv iOS sau o rezoluție de ecran pentru a vedea cum va fi redată pagina.

Puteți instrui, de asemenea, Safari să simuleze diferiți agenți utilizatori utilizând meniul derulant direct deasupra pictogramelor de rezoluție.

Instrumente pentru dezvoltatori Safari

În plus față de modul Responsive Design, Safari’s Develop oferă multe alte opțiuni utile, inclusiv:

  • Deschideți pagina cu: Deschideți pagina web activă în orice alt browser instalat în prezent pe Mac.
  • Agent utilizator: Modificarea agentului de utilizator determină serverele web să identifice browserul dvs. ca altceva decât Safari.
  • Conectați inspectorul Web: Afișați toate resursele unei pagini web, inclusiv informații CSS și valori DOM.
  • Afișează Consola de eroare: Afișează erorile și avertismentele JavaScript, HTML și XML.
  • Afișați sursa paginii: Vizualizați și căutați codul sursă al paginii web active.
  • Afișați resursele paginii: Afișează documente, scripturi, CSS și alte resurse din pagina curentă.
  • Afișați Editorul de fragmente: Editați și executați fragmente de cod. Această caracteristică este foarte utilă din perspectiva testării.
  • Afișați Extender Builder: Creează propriile extensii Safari prin ambalarea codului corespunzător și adăugarea de metadate.
  • Începeți înregistrarea timpului: Înregistrați cererile de rețea, execuția JavaScript, redarea paginii și alte evenimente în cadrul inspectorului WebKit.
  • Cache-uri goale: Ștergeți toate cache-urile stocate din Safari, nu doar fișierele standard din memoria cache a site-ului web.
  • Dezactivează memoria cache: În cazul în care cache-ul este dezactivat, resursele sunt descărcate de pe un site web 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ă implicit din motive de securitate, această caracteristică vă permite să introduceți adrese URL care conțin JavaScript în bara de adrese Safari.
  • Tratați certificatele SHA-1 ca nesigure: Scurt pentru algoritmul Hash Secure, funcția de hash SHA-1 s-a dovedit a fi mai puțin sigură decât se credea inițial, de aici adăugarea acestei opțiuni în Safari.

Popular

Mai Multe Detalii

Cum să-ți filmezi propria reclamă
Software-Ul

Cum să-ți filmezi propria reclamă

Aceata ete partea creativă a proiectului tău: braintorming conceptul reclamei tale. Dacă reclama dv. ete detinată televizorului, în general aveți doar 15-30 de ecunde. Îmbunătățirea meajulu...
Cum dezactivați Alertele AMBER pe Android
Tehnologies

Cum dezactivați Alertele AMBER pe Android

electați Alerte de urgență. Debifați caeta de lângă Alertele AMBER. De aemenea, puteți dezactiva alertele pentru amenințări extreme și amenințări evere. Meniul etări vă permite ă dezactivați ale...