Cum să utilizați Web Inspector pentru a depana Mobile Safari (iPhone sau iPad)

Dezvoltarea paginilor web pentru dispozitive mobile sau depanarea aplicației hibride este adesea dificilă. Dar, din fericire pentru cei care proiectează pe iOS, începând cu iOS 6, Apple oferă o funcție de inspector web la distanță în iOS.

Web Inspector permite dezvoltatorilor de aplicații web și mobile să folosească instrumentele de dezvoltare macOS și OS X Safari pentru a depana de la distanță conținutul web sau aplicațiile hibride în Safari mobil pe iPad sau iPhone.

Este o modalitate ușoară și practică de a depana, optimiza și modifica paginile web sau aplicațiile hibride pe iOS.

Pentru a accesa aceste instrumente de dezvoltare, activați meniul Dezvoltare din preferințele avansate ale Mac-ului dvs. Safari.

Sfaturi rapide

Urmați aceste sfaturi rapide pentru ca inspectorul web să funcționeze, astfel încât să vă puteți depana site-ul sau aplicația pentru Safari

• Resetați locația și setările de confidențialitate pe iPhone, iPad sau iPod touch. Mergi la Setări > General > Resetare > Resetare locație și confidențialitate
• Asigurați-vă că vă conectați la același ID Apple pe computer ca iPhone, iPad sau iPod touch
• Activați sincronizarea Safari iCloud atât pentru computer, cât și pentru orice iPhone, iPad sau iPod touch
• Pe iPhone sau iPad, accesați Setări > Safari > Avansat și comutați Inspector web
• Pe computer, deschideți Safari și accesați Meniul Safari > Preferințe > Avansat și bifa Afișați meniul Dezvoltare în bara de meniu

Articole similare

• Vizualizați codul sursă HTML al paginii web pe iPad sau iPhone. Nu este necesară nicio aplicație!
• Cum să vizualizați codul sursă HTML în Safari
• Cum să vezi Favicons în Safari pentru iPhone și Mac

Este necesar un computer Mac

Ne pare rău, oameni buni de la Windows, dar Safari’s Web Inspector este compatibil doar cu Mac-uri!

Utilizați același ID Apple și iCloud Sync!

Asigurați-vă că atât iDevice-ul, cât și Mac-ul dvs. sunt conectate cu același ID Apple și că activați Safari în iCloud.

Pentru iDevice-ul dvs.: Setări > Profil ID Apple > iCloud > Safari > a activat

Pentru Mac-ul tău: Meniu Apple > Preferințe de sistem > ID Apple sau iCloud > Safari > Bifat

Și verificați că și Safari este aceeași versiune

Asigurați-vă că Safari pe Mac este aceeași versiune ca Safari pe iDevice. Poate fi necesar să vă actualizați versiunea iOS sau versiunea Safari care rulează pe Mac.

Resetați locația și setările de confidențialitate

1. Mergi la Setări > General
2. Selectați Resetați
3. Alege să Resetați locația și confidențialitatea

Sfat pentru scurtături de la tastatură profesională pe Mac pentru dezvoltatori web

Dacă apăsați CTRL+Command+R în Safari, puteți vedea cum ar arăta un site web pe un anumit dispozitiv selectând dispozitivul.

Utilizați Web Inspector pentru a depana Safari mobil

1. Pe iPad, iPhone sau iPod touch, atingeți Setări > Safari > Avansat și comutați Inspector web. Și activați JavaScript dacă nu este deja activat

2. Pe Mac, lansați Safari și accesați Meniul Safari > Preferințe > Avansat apoi bifați „Afișați meniul Dezvoltare în bara de meniu” dacă nu ați făcut-o deja

3. Conectați dispozitivul iOS la Mac cu cablul USB. Acest lucru este critic – trebuie să conectați dispozitivele manual, folosind un cablu. Nu funcționează prin WiFi!

4. Acum, pe iPad, deschideți site-ul web pe care doriți să îl depanați, apoi, pe Mac, deschideți Safari și accesați „Dezvolta" meniul. Acum vedeți iDevice-ul pe care l-ați conectat la Mac. Dacă nu aveți nicio pagină deschisă pe iDevice, veți vedea un mesaj care spune „Fără aplicații inspectabile”.

5. Acum depanați pagina care este deschisă pe Safari mobil la fel cum ați depana pe Mac, inspectați elementele DOM, modificați CSS, măsurați performanța paginii și rulați comenzi Javascript.

Utilizați instrumentul de depanare pentru a vă ajuta să găsiți cauza oricăror erori JavaScript pe pagina dvs. web. Puteți adăuga puncte de întrerupere, puteți depana javascript și puteți inspecta valoarea variabilelor în timpul execuției.

De asemenea, Safari ar trebui să detecteze orice erori CSS, HTML și JavaScript. Și veți vedea detaliile fiecărei erori în depanator.

iDevice nu apare în meniul Dezvoltare din Safari?

•  Ștergeți memoria cache și cookie-urile din Safari
• Actualizați Safari pe Mac și iDevice dacă este disponibilă o actualizare.
  • Dacă rulați o versiune beta iOS sau macOS, poate fi necesar să rulați cea mai recentă versiune beta pe toate dispozitivele
• Încercați un alt cablu și/sau port pe Mac. Asigura-te ca cablul este un cablu Lightning autentic Apple sau certificat MFI (realizat pentru iPhone)
• Verificați dacă Web Inspector este activat. Actualizările iOS uneori comută acest lucru înapoi la setarea implicită OFF. Așa că asigurați-vă că verificați Setări > Safari > Avansat > Web Inspector
  • Încercați să dezactivați Web Inspector, așteptați 10 secunde și porniți din nou
• Încercați browserul Safari Technology Preview
• Închideți Safari pe Mac și reporniți-l. Vedeți dacă Safari de pe Mac vă recunoaște dispozitivul și permite depanarea
• Verificați dacă nu utilizați modul de navigare privată al Safari if iDevice-ul tău apare doar pentru scurt timp în meniul Dezvoltare al Safari și apoi dispare
• Deschideți Monitorul de activitate și verificați ce se întâmplă cu Safari

Sfaturi pentru cititor 

• Dacă utilizați un iDevice mai vechi cu iOS 6 sau o versiune anterioară, browserul web Safari al dispozitivului dvs. are propria sa consolă de depanare încorporată! Accesați Consola de depanare a Safari accesând Setări > Safari > Dezvoltator > Consola de depanare