Share
Crearea și depanarea site-urilor web și a aplicațiilor web pentru dispozitive mobile poate fi un hassle. Pe desktop avem instrumente puternice de depanare; majoritatea browserelor au un inspector de web de un fel. Dar nu avem aceste instrumente pentru dispozitive precum iPhone și iPad ... adică până acum!
Odată cu lansarea recentă a Safari 6 și iOS 6, puteți utiliza acum inspectorul web pentru a construi și depana site-uri Web pe desktop și pe Safari pentru dispozitive mobile. Cel mai bun din toate? Este un proces simplu de configurare. Urmați acest tutorial și veți avea câteva instrumente puternice de depanare pentru iDevices mobile la îndemână în cel mai scurt timp.
Instrumentele de dezvoltare moderne ale browserului au fost un imens ajutor în construirea de site-uri web și de aplicații web. Chrome are instrumente de dezvoltare. Firefox? Firebug. Safari? Inspector web. Toate instrumentele extrem de puternice în dezvoltarea web.
Fie ca atare, până în acest moment depanarea site-uri web și aplicații web pe dispozitive mobile a fost un hassle. Deoarece atât Safari cât și Chrome rulează pe motorul webkit, există multe asemănări în modul în care desktopul și browserul mobil oferă un aspect web. Astfel, majoritatea designerilor / dezvoltatorilor își construiesc și optimizează site-urile pe desktop folosind unul dintre aceste browsere, presupunând că asemănările rezultate din motorul webkit vor face pagina la fel de egală pe un dispozitiv mobil.
Cu toate acestea, platformele mobile și desktop sunt destul de diferite. Au capacități de memorie diferite, potențial de performanță, dispozitive de intrare și conectivitate în rețea. Deci, a devenit imperios necesar ca instrumentele de depanare ale unui proiectant pentru dispozitivele mobile să devină mai performante și să se potrivească cu cele ale omologilor lor desktop.
Noile versiuni de software ale lui iOS 6 și Safari 6 ale lui Apple aduc multe dintre caracteristicile instrumentelor de depanare ale browserului de desktop pe care le cunoaștem cu toții și le place cu dispozitivele mobile. Acest tutorial vă va arăta procesul simplu de a obține configurarea pentru a depana site-uri web mobile folosind inspectorul web al Safari.
Înainte de a începe, o notă privind compatibilitatea: Există o veste proastă pentru cei care folosesc Windows. Puteți depana numai cu ajutorul inspectorului Web de la distanță pe un Mac. Safari 6 pentru ferestre nu este disponibil. De asemenea, Safari 6 este disponibil numai pentru Mac-urile care rulează OSX Lion sau mai mult.
Există două metode pentru utilizarea inspectorului web în Safari pentru dispozitive mobile:
Vom acoperi aceste două metode și vă vom lăsa să alegeți care dintre cele mai potrivite situații.
Deoarece depanarea dispozitivelor mobile cu inspector de web este o caracteristică nouă, va trebui să vă asigurați că aveți toate cele mai noi software-uri.
Metoda dispozitivului real: Pentru a utiliza inspectorul web în tandem cu un iDevice real, veți avea nevoie de următoarele:
Metoda dispozitivului virtual: Pentru a utiliza inspectorul web în tandem cu simulatorul iOS, veți avea nevoie de următoarele:
Verificarea versiunilor de software: Pentru a verifica dacă rulați iOS 6 pe iDevice, accesați "Settings> General> About" de pe dispozitiv.
Pentru a verifica dacă rulați Safari 6 mergeți la meniul Safari și faceți clic pe "Safari> Despre Safari".
Pentru a vă asigura că rulați Lion, faceți clic pe sigla Apple din bara de meniu și alegeți "Despre acest Mac"
Pentru a vă asigura că executați versiunea corectă de Xcode, deschideți Xcode și alegeți "Xcode> About Xcode"
Trebuie să activați instrumentele pentru dezvoltatori și inspectorul web în versiunile desktop și mobile ale Safari.
Metoda dispozitivului real: Dacă intenționați să utilizați un dispozitiv real, conectați-l la mac prin USB.
Metoda dispozitivului virtual: Dacă intenționați să utilizați simulatorul iOS, deschideți Xcode, apoi faceți clic dreapta pe pictograma dock și alegeți "Open Developer Tool> iOS Simulator".
Mobile Safari: Pe simulatorul dvs. real iDevice sau iOS, mergeți la "Settings> Safari> Advanced" și porniți "Web Inspector".
Safari pentru desktop: Dacă nu aveți deja, asigurați-vă că ați activat instrumentele pentru dezvoltatori din Safari. Veți ști că le-ați activat dacă puteți vedea "Dezvoltare" în bara de meniu.
Dacă nu puteți vedea "Dezvoltați" în bara de meniu, accesați bara de meniu și faceți clic pe "Safari> Preferences> Advanced" și bifați caseta de selectare "Afișați meniul de dezvoltare din bara de meniu".
Acum că aveți fie un iOS Simulator deschis, fie iDevice-ul conectat la mac prin USB (sau ambele!), Sunteți gata să începeți să utilizați inspectorul web pe site-ul dvs..
Pe Mac, deschideți Safari și mergeți la "Dezvoltați". Ar trebui să vedeți acum orice iDevices (virtuale sau reale) pe care le-ați conectat și care rulează cu Mac. În ecranul de mai jos, veți vedea că am două dispozitive în meniu: unul este simulatorul iOS, celălalt este un iPhone real conectat la Mac.
Pentru a începe efectiv inspectarea unui site web, trebuie să aveți un Safari mobil lansat pe dispozitiv și să aveți una din filele deschise pe site. Dacă nu aveți deschis Safari pentru mobil, veți vedea un mesaj care să arate că "Nu există aplicații inspectabile".
Pentru a începe inspectarea, pur și simplu introduceți URL-ul paginii pe care doriți să o inspectați în Safari mobil și apoi alegeți site-ul respectiv din meniul "Dezvoltare". Puteți începe inspectarea site-urilor pe propriul dvs. iDevice real sau din simulatorul iOS. Când selectați pagina, veți vedea o suprapunere albastră în pagină, indicând pe care dintre dvs. ați selectat-o.
Selectând un site, inspectorul web al Safari se va deschide și vă va permite să începeți inspectarea site-ului dvs. Asta e!
Acum, că aveți inspectorul de web al Safari la îndemână, aveți mai mult control în construirea și depanarea site-urilor și aplicațiilor web.
Iată un exemplu de câteva lucruri pe care le puteți face acum când depanem site-uri mobile:
Aveți instrumentele, mergeți și construiți!
Accentsconagua