Paano Malayuang Mag-debug ng Mga Web Apps sa Android

Ang web ngayon ay mas bina-browse sa mga mobile phone, kaysa sa mga desktop. Dahil ang mga device ay naging talagang portable at mas maliit ang mga laki ng screen. Kaya kung gumagawa ka ng web application, hindi mo lang maiiwasan ang suporta para sa mga mobile phone (Android o iOS). Ang mga sirang o hindi magandang hitsura na mga site sa mga mobile screen ay maaaring talagang magdulot ng pinsala sa iyong reputasyon online. Ang karanasan ng gumagamit sa mga telepono ay ganap na naiiba sa desktop. Kaya kailangang espesyal na idisenyo ng mga developer ang mga application para umangkop sa mobile screen.

Ang Google Chrome Dev, ay nagbibigay ng mga tool na nagbibigay-daan sa iyong suriin, i-debug, suriin ang karanasan sa device, at magagamit mo ang mga tool ng Chrome Dev sa iyong lokal na makina upang i-debug ang iyong application sa mobile device. Sa tutorial na ito, pag-aaralan natin kung paano i-setup ang iyong local development machine para malayuang mag-debug sa Android. Kami ay magde-debug sa isang USB na koneksyon sa pagitan ng iyong mobile device at ng iyong lokal na development machine.

Kakailanganin mo ang sumusunod, upang sumulong sa malayuang pag-debug:

1. Isang Android mobile o tablet na may naka-install na Chrome para sa Android 28 (maaari mo itong i-install mula sa dito).
2. Isang USB cable upang ikonekta ang iyong Android device sa iyong lokal na development machine, siguraduhin din na mayroon kang mga kinakailangang drive na naka-install upang ikonekta ang iyong Android mobile sa isang computer.
3. Lagyan ng check ang Listahan ng mga driver ng OEM USB at alamin ang mga angkop na driver para sa iyo.
4. Naka-install ang Chrome 28+ sa iyong lokal na development machine.
5. Tiyaking mayroon kang ADB Chrome extension na naka-install sa iyong lokal na development machine. Maaari mong i-install ito mula sa dito.

Sa tutorial na ito, gagamit kami ng Sony Xperia L (Android device), at Windows 7 sa aming local development machine. Kaya't magsimula tayo sa malayuang pag-debug:

1. Siguraduhin muna na pinagana mo ang Debug mode sa iyong Android device

Kung hindi mo pinagana mangyaring sumangguni dito:

• Para sa mga user sa Android 4.2 sumangguni sa: http://www.thesmarthacks.com/2013/04/enabling-usb-debugging-mode-on-android.html.
• Ang iba sa kanila ay maaaring sumangguni sa: http://www.groovypost.com/howto/mobile/how-to-enable-usb-debugging-android-phone/.

Para sa higit pang impormasyon sa pag-set up ng Android device para sa pag-unlad mangyaring sumangguni sa: http://developer.android.com/tools/device.html#setting-up.

2. Pagkonekta sa iyong Android device

Ngayon ikonekta ang iyong Android device, sa iyong lokal na development machine gamit ang isang USB cable. Kapag nakonekta mo na ang iyong Android device, kailangan mong paganahin ang USB web debugging sa iyong telepono, sa pamamagitan ng paglulunsad ng Chrome sa iyong Android pagkatapos, -> Mga Setting -> Mga tool ng developer -> Piliin ang Paganahin ang USB Web Debugging

Kapag pinipili ang opsyong ito kung hihilingin sa iyo na kumpirmahin ang iyong koneksyon sa development machine, piliin ang OK.

3. Pag-debug

Pagkatapos i-install ang extension ng ADB, makakakita ka ng kulay abong icon ng Android sa tabi ng menu ng Chrome. Ngayon mag-click sa icon ng Android at piliin -> Simulan ang ADB. Ngayon dapat itong maging berde, at ipapakita ang bilang ng mga nakakonektang device sa kasalukuyan. Pagkatapos ay mag-click sa icon at piliin ang -> Tingnan ang Mga Target ng Inspeksyon. Dapat itong magbukas ng bagong tab at ipapakita ang bilang ng mga nakakonektang Android device at ang kasalukuyang nakabukas na mga tab sa kanila.

Piliin ngayon ang tab mula sa listahan na gusto mong i-debug. Magbubukas ito ng bagong Window na may Mga Tool ng Developer.

Ngayon siyasatin ang ilang elemento mula sa page, at ang elemento ay maiha-highlight sa Chrome mobile, nang real time.

Sa ganitong paraan maaari mong ayusin ang mga bug na partikular sa device, sa pamamagitan ng pag-debug mula sa mga tool ng Dev. Maaari kang magsagawa ng mga command mula sa Dev tool na isasagawa sa Chrome mobile. Tingnan din ang iba't ibang panel tulad ng Network, Resources, Timeline, Profile, Audits.

Ngayon ay maaari mo nang ayusin ang mga bug na partikular sa mobile, at i-debug ang mga mobile app nang real time sa halip na i-deploy ang iyong app sa server at pagkatapos ay i-access ito mula sa iyong telepono at pag-debug. Ibinibigay ng Google Chrome Dev ang mga tool na ito na lumulutas ng totoong sakit, para sa mga developer na gumagawa ng mga app na katugma sa device.