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:
- Isang Android mobile o tablet na may naka-install na Chrome para sa Android 28 (maaari mo itong i-install mula sa dito).
- 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.
- Lagyan ng check ang Listahan ng mga driver ng OEM USB at alamin ang mga angkop na driver para sa iyo.
- Naka-install ang Chrome 28+ sa iyong lokal na development machine.
- 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.
Nakakatuwang malaman ang tungkol sa Chrome Dev. Ang alok ng platform sa mga developer para sa mga browser at mobile (iOS at Android) ay dumarami araw-araw. Salamat sa lahat ng detalyadong larawan tungkol sa proseso ng pag-debug.
Ito ay talagang kamangha-manghang at kapaki-pakinabang na post. Mula dito, mauunawaan natin ang mga malinaw na pamamaraan tungkol sa Malayuang Pag-debug sa Web Apps sa Android. Ipinapaliwanag din ng mga larawan ang pamamaraan tungkol sa Chrome Dev sa isang malinaw at madaling paraan.
Wow! Android rocks!
Hindi ko alam kung posible pa ba iyon
Sa tingin ko ito ay talagang kapaki-pakinabang na post para sa lahat ng mga gumagamit ng android. lalo na sa mga araw na iyon, maraming apps para sa mga browser at kadalasang ginagawang malito ang mga user.
Ang lahat ng Mga Larawan ay napakadetalye at madaling i-follow up ang lahat ng mga hakbang.
Salamat sa iyong pagbabahagi.
Stephan Wu
Talagang nakakatulong ang post na ito sa pag-debug ng mga web app sa Android. Hindi ko naisip ito.
Ito ay isang napaka-kaalaman na post. Ngayon ay maaari na nating malayuang mag-debug ng mga web app sa Android.
Napakahusay na ipinakita, nagbibigay-kaalaman na post. Palagi kong iniisip kung paano i-debug ang mga web app nang malayuan ngunit ang iba pang mga blog na nabasa ko sa nakaraan ay hindi masyadong prangka. Salamat sa paglalagay nito sa malinaw na mga termino para sa amin na nahihirapang sundin ang teknolohikal na wika.
Tulad ng sinabi ni Stephan, ang mga imahe ay napaka-detalyado na ginagawang mas madaling sundin ang mga tagubilin.
Ako ay naghahanap ng isang paraan upang i-debug ang aking Samsung Galaxy S3. Sa tingin ko ay dumating ako sa tamang lugar dahil talagang nakatulong ang iyong tutorial at matagumpay kong na-debug ang aking device. Maraming salamat sa tulong.
Wow! Hindi ko alam na magagawa mo ito sa aking Android phone.
Salamat!
Talagang kamangha-mangha, hindi ko naisip na ang pag-debug ay maaaring gawin nang malayuan, partikular para sa mga android app ...
Kumusta,
Salamat, sa wakas nagawa ko na ang pag-debug nang malayuan, talagang nakakatulong.