testarea și depanarea site-urilor web și a aplicațiilor web pe dispozitive mobile poate fi o provocare. Browserele de pe telefoane și tablete adesea nu au depanatoare încorporate, iar emularea dispozitivelor mobile nu este niciodată atât de precisă pe cât doriți. Pentru a depana site-urile mobile pe Android, versiunea desktop a Chrome oferă o soluție cu depanare la distanță.,acest articol vă va arăta cum să utilizați depanarea la distanță cu Chrome de pe computer. Puteți utiliza unul dintre sistemele de operare desktop comune, cum ar fi Windows, macOS sau Linux.dacă credeți că ați putea avea o eroare într-un site web mobil sau într-o aplicație nativă pe Android, dar nu o puteți fixa, Raygun acceptă raportarea erorilor JavaScript, precum și raportarea erorilor Android. Puteți lua un proces gratuit de 14 zile aici.
Configurarea
înainte de a putea face orice depanare de la distanță, trebuie să configurați computerul pentru a putea recunoaște dispozitivul Android., Aceasta înseamnă să permiteți depanatorului Chrome să recunoască și să se atașeze la telefon. Veți începe prin setarea unor opțiuni pe telefon.
Setări telefon
deschideți aplicația Setări de pe telefon. Va trebui să activați opțiunile pentru dezvoltatori dacă nu ați făcut-o deja. Pentru a face acest lucru, accesați meniul „Despre telefon”, care se află în meniul sistemului pe dispozitivele Android moderne. Odată ce sunteți acolo, derulați în partea de jos și atingeți „Construiți numărul” de șapte ori. Acum, reveniți la ecranul anterior sau în meniul „Sistem” din aplicația Setări., Acolo, veți găsi acum un nou element de meniu numit „opțiuni pentru dezvoltatori” în partea de jos.după ce te afli în opțiunile pentru dezvoltatori, activează-le pe telefon făcând clic pe butonul de comutare din partea de sus a paginii. Când comutatorul spune „On”, derulați în jos un pic și activați și” debugging USB”. Acest lucru vă va permite să depanați dispozitivul printr-o conexiune prin cablu USB.
Configurare Computer (folosind Android USB debugging)
Instalare Driver
asta e tot ce putem face la telefon, deocamdată, așa că haideți să ne pregătim computerul., Pașii de întreprins sunt ușor diferiți pe fiecare dintre sistemele de Operare mari.
Dacă utilizați Windows, primul lucru pe care trebuie să îl faceți este să instalați driverele USB pentru dispozitivul dvs. Site-ul Android Studio are o listă de locuri pentru a găsi driverele împreună cu câteva instrucțiuni despre cum să instalați driverele pe computer. Unii producători oferă link-uri către un fișier de driver. Alții vă conduc doar la un site web de asistență, caz în care va trebui să faceți un pic de căutare pentru a găsi driverele pentru dispozitivul dvs.,
în cazul în care computerul dvs. rulează macOS sau Linux, nu va trebui să instalați drivere. Utilizatorii de Mac sunt de fapt gata de plecare. Dacă computerul dvs. rulează Linux, sunt necesari mai mulți pași de configurare. Trebuie să vă asigurați că contul dvs. de utilizator aparține unui anumit grup și va trebui să instalați un pachet cu așa-numitele „reguli udev”. Acestea sunt configurații care fac anumite dispozitive USB cunoscute computerului Linux. Dacă sunteți interesat de mai multe detalii, am scris un articol dedicat despre configurarea Linux pentru ADB cu ceva timp în urmă.,după ce ați instalat driverele sau regulile udev, veți avea nevoie și de ADB, care oferă o interfață pentru a vorbi cu dispozitivul dvs. mobil. ADB și alte instrumente de platformă Android vin cu Android Studio, dar le puteți descărca separat.
fie folosind SDK-ul Android încorporat al Android Studio, fie pachetul oficial platform tools de la Google sunt modalitățile preferate de a merge. Pachetele de instrumente platforma sunt doar .zip-fișiere care conțin un folder platform-tools., După extragerea fișierelor veți găsi binare, cum ar fi adb.exe (Windows) sau adb (macOS și Linux) acolo. Puteți apoi să le executați după cum este necesar dintr-o fereastră shell sau terminal la alegere.dacă sunteți pe Windows și doriți cea mai minimă versiune de ADB fără niciun puf, aruncați o privire la forumurile XDA; derulați în jos la rubrica descărcări și faceți clic pe primul link din acea secțiune.
după ce este descărcat, rulați-l pentru a instala ADB., Odată ce este instalat, va trebui să navigați la folderul unde a fost instalat (C:\Program Files(x86)\Minimal ADB and Fastboot în mod implicit) și faceți dublu-clic cmd-here.exe. Aceasta va deschide o fereastră de prompt de comandă în acel folder.folosind oricare dintre tehnici, în fereastra shell, tastați adb start-server pentru a porni serverul ADB.
notă: serverul ADB va trebui să ruleze oricând doriți să depanați. Dacă reporniți computerul, serverul nu va rula automat. Nu este recomandat să rulați ADB ca serviciu de fundal permanent.,ultimul lucru pe care trebuie să-l facem pentru a configura computerul este să activăm depanarea la distanță în Instrumentele pentru dezvoltatori Chrome. Pentru a face acest lucru, deschideți Chrome pe computer și accesați setările DevTools la chrome://inspect/#devices
pentru a depana site-urile web din Android de aici, asigurați-vă că este bifată „Discover USB devices”. Aș sugera, de asemenea, să păstrați această secțiune a instrumentelor pentru dezvoltatori deschise într-o filă, deoarece vom avea nevoie din nou în curând.
efectuarea conexiunii
care este în măsura în care puteți obține cu fiecare dispozitiv pe cont propriu., Pentru a depana site-urile web în Android pe dispozitiv, va trebui să le conectăm împreună. Dacă nu ați făcut-o deja, conectați telefonul la computer prin USB. Dacă nu ați făcut acest lucru ca parte a instalării driverului, este posibil să vedeți o notificare pe bara de activități care vă informează că computerul vă configurează noul dispozitiv. Asigurați-vă că telefonul este pornit și deblocat. Dacă este și serverul ADB rulează, ar trebui să vedeți un pop-up intitulat „permiteți depanarea USB?”.
dacă nu apare, căutați în zona de notificare de pe dispozitivul Android., Dacă scrie „conectat ca dispozitiv media”, ceva de genul acesta sau ceva despre „MTP”, faceți clic pe el. Acest lucru ar trebui să vă aducă la un ecran care vă permite să alegeți un alt tip de conexiune. Pentru scopul nostru „Camera (PTP)” este tipul de conexiune adecvat. După ce ați selectat PTP, ” permiteți depanarea USB?”popup ar trebui să vină.pentru a evita să aveți de-a face cu acest pop-up de fiecare dată când conectați dispozitivul, bifați opțiunea „Permiteți întotdeauna de pe acest computer”. În orice caz, veți dori să faceți clic pe „OK”, ceea ce va permite dispozitivului dvs. mobil să fie vizibil pentru computer pentru depanare., În acest moment, reveniți la fila DevTools la care ne-am uitat mai devreme. Dacă totul a mers bine, ar trebui să vedeți telefonul și toate filele Chrome listate acolo acum.
Debug site-uri web care rulează în Chrome pe dispozitiv
acum este timpul pentru a opri obtinerea configurat și începe depanare! În sfârșit! Chrome de pe computer ar trebui să vă afișeze o listă de file deschise în browserul Chrome de pe dispozitivul dvs. la distanță. Dacă fila pe care doriți să o depanați nu este fila activă, puteți face clic pe „focus tab” pentru a deveni fila activă de pe dispozitiv. Apoi faceți clic pe linkul „inspectați”.,acest lucru va aduce inspectorul pentru acea filă. De aici, puteți utiliza instrumentele pentru dezvoltatori Chrome destul de mult ca și cum ați depana o pagină web în browserul desktop. Puteți chiar să vedeți ecranul dispozitivului dvs. în instrumentele pentru dezvoltatori. Dacă nu se afișează deja sau dacă doriți să o dezactivați, faceți clic pe pictograma din dreptul pictogramei inspectorului din colțul din stânga sus al instrumentelor pentru dezvoltatori.
sfaturi de depanare
De asemenea, puteți controla dispozitivul de la instrumentele pentru dezvoltatori., Utilizați cursorul mouse-ului pe ecran exprimate ca și în cazul în care cursorul a fost un deget pe dispozitivul în sine.
- faceți Clic pentru a apăsați
- faceți Clic și trageți pentru a treceți
- Utilizați rotița de derulare pentru a derula
- Ții
Shiftîn timp ce trageți în sus pentru a mări - Ții
Shiftîn timp ce glisați în jos pentru a micșora
puteți observa că există unele pete transparente în ecranul exprimate. Acestea sunt elemente UI din aplicația Chrome sau din interfața de utilizare a sistemului dispozitivului., Acestea sunt ascunse deoarece protocolul de depanare la distanță vă permite doar să interacționați cu pagina web în sine.pe dispozitive mai vechi și mai puțin puternice, ecranul cast utilizează o mare parte din puterea de procesare a dispozitivului dvs. mobil. S-ar putea observa performanța pare lent în timp ce sunt ecran de turnare. Astfel, dacă încercați să măsurați performanța, dezactivați distribuția ecranului și interacționați direct cu dispozitivul mobil.în cele din urmă, dacă întâmpini probleme în care nu se întâmplă nimic atunci când interacționezi cu dispozitivul, încearcă să închizi aplicația Chrome și să o redeschizi., Va trebui să vă conectați din nou la dispozitivul de la distanță prin ecranul DevTools din instrumentele pentru dezvoltatori. Dacă acest lucru nu ajută, parcurgeți această listă de verificare rapidă:
- deconectați dispozitivul și conectați-l din nou la
- blocați telefonul și treziți-l din nou
- închideți fereastra Instrumente pentru dezvoltatori și redeschideți-l din nou.
concluzie
Debugging site-uri mobile în Android Chrome nu trebuie să fie dificil. S-ar putea să dureze un pic mai mult decât ne-am dori majoritatea dintre noi. Dar, odată ce ați avut grijă, depanarea unei pagini web mobile pe dispozitiv devine mult mai simplă., Acum puteți depana Site-urile mobile Android pe un dispozitiv fizic real.
ați petrecut prea mult timp descoperind bug-ul dvs. în primul rând? Raygun vă ajută să detectați, să diagnosticați și să distrugeți erorile din codul JavaScript sau Android. Alertele inteligente și gruparea erorilor înseamnă că nu mai pierdeți niciodată o eroare în aplicație. Cititi mai multe despre Android crash reporting și JavaScript crash reporting.
mai multe despre depanarea Android
cum să vă arhitectați Erorile pentru o mai bună raportare a erorilor
începeți cu depanarea la distanță în Android