• Laktawan sa pangunahing nabigasyon
  • Skip to main content
  • Laktawan sa pangunahing sidebar
  • Laktawan sa footer

TechLila

Dumudugo Gilid, Lagi

  • Tahanan
  • tungkol sa
  • Makipag-ugnay sa
  • Mga Deal at Alok
Logo ng Techlila
magbahagi
tiririt
magbahagi
aspile
4 Mga Pagbabahagi
CMS o HTML
Susunod

CMS o HTML: Ano ang Dapat Piliin ng Maliit na Negosyo Para sa Kanilang Website

Paano Malayuang Mag-debug ng Mga Web Apps sa Android

TechLila mobile Android

Paano Malayuang Mag-debug ng Mga Web Apps sa Android

Avatar ni Virendra Rajput Virendra Rajput
Huling na-update noong: Enero 9, 2022

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

Mga Tool ng Developer Android

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.

Siyasatin gamit ang Chrome Development Tool

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

Dashboard ng Mga Tool ng Developer

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

Naka-highlight na Element sa Chrome Mobile
Naka-highlight na Element sa Chrome Mobile Screenshot

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.

network

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.

magbahagi
tiririt
magbahagi
aspile
4 Mga Pagbabahagi

Pagsisiwalat: Ang nilalamang na-publish sa TechLila ay suportado ng mambabasa. Maaari kaming makatanggap ng komisyon para sa mga pagbili na ginawa sa pamamagitan ng aming mga link na kaakibat nang walang karagdagang gastos sa iyo. Basahin ang aming Pahina ng disclaimer upang malaman ang higit pa tungkol sa aming pagpopondo, mga patakaran sa editoryal, at mga paraan upang suportahan kami.

Ang pag bigay AY PAG ALAGA

magbahagi
tiririt
magbahagi
aspile
4 Mga Pagbabahagi
Avatar ni Virendra Rajput

Virendra Rajput

Virendra Rajput ay isang masugid na programmer at hacker. Isa siyang Co-Founder sa Markitty. Siya ay isang hardcore Python programmer na masigasig sa pag-hack gamit ang iba't ibang API. Sa kanyang bakanteng oras, mahilig siyang magtrabaho sa mga side-project.

kategorya

  • Android
  • Web Design and Development

reader Interactions

Kung ano ang sinasabi ng mga tao

  1. Avatar ni pedro miguelpedro miguel

    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.

    tumugon
  2. Avatar ng MeethuMeethu

    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.

    tumugon
  3. Avatar ng van wildervan Wil

    Wow! Android rocks!

    Hindi ko alam kung posible pa ba iyon

    tumugon
  4. Avatar ni StephanStephan

    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

    tumugon
  5. Avatar ng SatishSatish

    Talagang nakakatulong ang post na ito sa pag-debug ng mga web app sa Android. Hindi ko naisip ito.

    tumugon
  6. Avatar ni Karen DavidsonKaren Davidson

    Ito ay isang napaka-kaalaman na post. Ngayon ay maaari na nating malayuang mag-debug ng mga web app sa Android.

    tumugon
  7. Avatar ni James StevensJames Stevens

    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.

    tumugon
  8. Avatar ni Peter FordPeter Ford

    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.

    tumugon
  9. Avatar ng Mahesh SrivastavaMahesh Srivastava

    Wow! Hindi ko alam na magagawa mo ito sa aking Android phone.

    Salamat!

    tumugon
  10. Avatar ng BethanyBethany

    Talagang kamangha-mangha, hindi ko naisip na ang pag-debug ay maaaring gawin nang malayuan, partikular para sa mga android app ...

    tumugon
  11. Avatar ni AliciaAlicia

    Kumusta,

    Salamat, sa wakas nagawa ko na ang pag-debug nang malayuan, talagang nakakatulong.

    tumugon

Idagdag ang Iyong Komento Kanselahin ang sumagot

Ang iyong email address ay hindi nai-publish. Mga kinakailangang patlang ay minarkahan *

pangunahing Sidebar

popular

Paano Pataasin ang Bilis ng Broadband sa Windows

10 Pinakamahusay na Android launcher ng 2021

Mga Dapat Gawin Pagkatapos Mag-install ng Windows 10 – Mga Tip at Trick ng Windows 10

Nangungunang 10 Mga Search Engine na Magagamit Mo upang Pribado na Maghanap sa Web

55 Mga Kawili-wiling Katotohanan sa Computer na Magpapagulo sa Iyong Isip

Ano ang Hahanapin Kapag Bumili ng Laptop – Isang Gabay sa Pagbili ng Laptop

Fusion Drive Vs SSD – Mga Bagay na Walang Sinasabi sa iyo Tungkol sa Fusion vs SSD Storage

Mga Kapaki-pakinabang na Tool

• Grammarly - Libreng Grammar Checker
• SEMrush – Ang Pinakamagandang SEO Tool na Pinagkakatiwalaan ng Mga Eksperto
• Setapp – One-stop na subscription para sa Mac at iOS

Mga Paksa sa Trending

  • Android
  • internet
  • iPhone
  • Linux
  • Kapote
  • Katiwasayan
  • Social Media
  • Teknolohiya
  • Windows

Worth Checking

10 Pinakamahusay na Sound Equalizer para sa Windows 10 (2022 Edition!)

14 Pinakamahusay na VLC Skin na Lubos na Inirerekomenda at Libre

Footer Logo Logo ng Teksto ng Footer

Pampaa

tungkol sa

Kamusta at maligayang pagdating sa TechLila, ang sikat na blog ng teknolohiya kung saan makakahanap ka ng mga mapamaraang artikulo para sa pag-master ng mga pangunahing kaalaman at higit pa.

Sa TechLila, ang aming pangunahing layunin ay magbigay ng natatanging impormasyon, tulad ng mga tip at trick sa kalidad, mga tutorial, mga gabay sa kung paano sa Windows, Macintosh, Linux, Android, iPhone, Seguridad at ilang iba't ibang mga sub-topic tulad ng mga review.

Links

  • tungkol sa
  • Makipag-ugnay sa
  • Pagtatatuwa
  • Pribadong Patakaran
  • Mga Tuntunin

sundin

Custom na Tema Gamit ang Genesis Framework

Cloud hosting ng Cloudways

wika

en English
bg Българскиzh-CN 简体中文nl Nederlandsen Englishtl Filipinofr Françaisde Deutschid Bahasa Indonesiait Italianoja 日本語pl Polskipt Portuguêsro Românăru Русскийsr Српски језикes Españolsv Svenskatr Türkçeuk Українськаvi Tiếng Việt

© Copyright 2012–2023 TechLila. All Rights Reserved.