() translation by (you can also view the original English article)
Ang pagbuo at pag-debug ng mga websites at mga web applications para sa mga mobile device ay maaring maging isang abala. Sa desktop mayroon tayong mga kapaki-pakinabang na mga debugging tools; karamihan ng mga web browser ay may isang uri web inspector. Ngunit wala tayo nitong mga nasasabing kasangkapan para sa mga device na gaya ng iPhone at iPad ... hanggang sa ngayon!
Sa kasalukuyang labas ng Safari 6 at iOS 6, maari mo nang gamitin ang web inspector upang bumuo at magdebug ng websites sa desktop at sa pang-mobile na Safari. At ang pinakamaganda dito? Ito ay isang napakasimple lamang ihanda. Sundan lamang ang pagtuturong ito at magkakaroon ka ng ilang kapaki-pakinabang na kasangkapang pang-debug para sa iyong mga mobile na iDevices sa lalong madaling panahon.
Ang mga developer tools sa mga modern browser ay naging isang malaking tulong na sa pagbuo ng mga website at mga web applications. Ang Chrome ay mayroon developer tools. Firefox? Firebug. Ang safari? Web Inspector. Lahat ng mga ito ay mga maasahang kasangkapan sa web development.
Ngunit sa kabila ng lahat ng ito, hanggang sa ngayon ay malaking pag-subok pa rin ang pagde-debug ng mga website at mga web applications. Dahil ang Safari at Chrome ay parehong pinapagana ng webkit engine, maraming pagkakatulad ang paraan ng pag-render ng desktop at mobile browser. Kaya naman, karamihan ng mga designer o mga developer ay binubuo at kinukumpuni ang kanilang mga website sa pamamagitan ng mga browser na ito, sa pag-iisip na ang pagkakatulad ng webkit engine ay mag-rerender ng pahina na talagang kapareho ng sa mobile device.
Sa kabila nito, ang mobile at desktop platform ay totoong sadyang magkaiba. Mayroon silang magkaibang kapasidad ng memory, performance potential, input devices at network connectivity. Kaya naman hindi maiiwasan na ang debugging tools para sa mobile devices ng isang designer ay naging mas performant at pinapantayan ang mga katapat nito sa desktop.
Ang bagong software release ng Apple ng iOS 6 at Safari 6 ay nagdadala ng karamihan ng mga katangian ng mga desktop browser debugging tools na kilala at minahal natin sa mga mobile devices. Ang pagtuturong ito ang magpapakita sa inyo ng simpleng paraan ng paghahanda para mag-debug ng mga mobile website gamit ang web inspector ng Safari.
Bago tayo magsimula, isang paalala ukol sa pagkakabagay: May kaunting masamang balita para sa mga gumagamit ng Windows: Maari lamang kayong magdebug gamit ang web inspector sa Mac. Ang Safari 6 ay hindi makukuha sa Windows. Isa pa, ang Safari 6 ay makukuha lamang sa mga Mac na gumagana sa OSX Lion o mas mataas pa.
Pamamaraan sa Pag-gamit ng Web Inspector
Mayroong dalawang paraan para sa pag-gamit ng web inspector sa mobile Safari:
- Real Device Method: Gumamit ng isang tunay na iDevice (iPhone, iPad, etc) na nakakabit sa iyong computer sa pamamagitan ng USB
- Virtual Device Method: Gamitin ang iOS simulator, na bahagi ng Xcode.
Tatalakayin natin ang parehong pamamaraan na ito at hahayaan kayong mamili ng nababagay ayon sa inyong pangangailangan.
Hakbang 1: Siguruhing Ikaw ay Up to Date
Dahil ang pagde-debug ng mobile device gamit ang web inspector ay isang bagong pagtatampok, kailangan mong siguruhin na pinakabago ang iyong software.
Real Device Method: Upang magamit ang web inspector kasama ng isang tunay na iDevice, kakailanganin mo ang mga sumusunod:
- Isang iDevice (iPhone, iPad, iTouch) na umaandar sa iOS 6
- USB Cable
- Safari 6
- Mac OSX Lion (10.7.4) o mas mataas pa
Virtual Device Method: Upang magamit ang web inspector kasama ng iOS simulator, kakailanganin mo ang mga sumusunod:
- Safari 6
- Mac OSX Lion (10.7.4) o mas mataas pa
- Xcode 4.5 na may iOS 6 SDK (makukuha sa app store)
Suriin ang bersyon ng Software: Para alamin kung gumagana ang iyong iDevice gamit ang iOS 6, tumungo sa “Settings > general > About” sa iyong device.
Para alamin kung gumagana ang iyong Safari 6, tumungo sa menubar ng Safari at i-click anf “Safari > About Safari”.
Para siguruhing Lion ang gamit mo, i-click ang Apple logo sa menu bar at piliin ang “About this Mac”.
Para siguruhinh gumagana sa iyo ang tamang bersyon ng Xcode, buksan ang Xcode at piliin ang “Xcode > About Xcode”.
Hakbang 2: Buksan ang Developer Tools
Kakailanganin mong i-enable ang developer tools at web inspector sa parehong desktop at mobile na bersyon ng Safari.
Real Device Method: Kung gagamit ka ng real device, i-kabit ito sa iyong Mac gamit ang USB.
Virtual Device Method: Kung gagamit ka ng iOS simulator, buksan ang Xcode, at mag-right-click sa dock icon at piliin ang “Open Developer Tool > iOS Simulator”.
Mobile Safari: Sa iyong tunay na iDevice o sa iOS simulator, tumungo sa “Settings > Safari > Advanced” at buksan ang “Web Inspector”.
Desktop Safari: Kung hindi pa, siguruhing nakabukas ang developer tools sa iyong Safari. Malalaman mo na nakabukas ang mga ito kapag nakikita mo ang “Develop” sa menu bar.
Kung hindi mo pa nakikita ang develop sa menu bar, tumungo sa menu bar at i-click ang “Safari > Preferences > Advanced” at piliin ang “Show develop menu in menubar” na checkbox.
Hakbang 3: Siyasatin ang iyong Website
Ngayon na bukas na ang iyong iOS simulator o nakakabit na ang iyong iDevice sa iyong Mac sa pamamagitan ng USB (o pareho!), handa ka nang simulan ang pag-gamit ng web inspector para sa iyong website.
Sa iyong mac, buksan ang Safari at tumungo sa “Develop”. Dapat ay makikita ka nang kahit anong iDevice (real o virtual) na iyong ikinabit at gumagana sa iyong mac. Sa screenshot sa ibaba, makikita mong mayroon akong dalawang iDevice sa menu: isa ay ang iOS simulator, ang isa ay ang tunay na iPhone na ikinabit ko sa aking mac.
Upang tunay nang masimulan ang pagsisiyasat sa isang website, kailangan mong i-launch ang mobile na Safari sa device at buksan ang website sa isang tab. Kung hindi bukas ang Safar sa iyo, makakakita ka ng mensaheng nagsasabing “No Inspectable Applications”.
Upang simulan ang pagsisiyasat, ilagay lamang ang URL ng pahinang gusto mong siyasatin sa mobile na Safari at piliin ang site na iyon sa “Develop” menu. Maaari mong simulang siyasatin ang mga site sa iyong tunay na iDevice o mula sa iOS Simulator. Kapag pinili mo ang pahina, makakakita ka ng isang asul na overlay sa pahina, na magsasabi kung ano ang iyong pinili.
Sa pagpili ng isang site, ang web inspector nf Safari ay bubukas at hahayaan kang magsimula ng pagsisiyasat sa iyong website. Iyan na iyon!
Pagtatapos
Ngayon na taglay mo na ang web inspector ng Safari sa iyong mga kamay, mayroon ka nang mas malaking kontrol sa paggawa at pagdebug ng mga website at mga web applications.
Ito ang ilan sa mga bagay na maaari mo nang gawin kapag nagde-debug ng mobile sites”
- Gumawa ng live na mga pagbabago sa HTML at CSS
- Tignan kung papaano gumagana ang iyong website/application kasama na ang makita ang detalye para sa mga JavaScript events at mga network requests
- Magdebug ng JavaScript gamit anf breakpoints at iba pang mga gamit.
- Tignan ang mga warnings at mga errors
- Puntahan ang console
- Hanapin ang DOM
- Puntahan at tignan ang site storage
Nasaiyo na ang mga kasangkapan, humayo ka at lumikha!
