„Secretul” lui DevTools pentru dezvoltatorii de Web mobil

Adil Aliyev

Follow

29 nov, 2018 – 3 min citește

O postare specială a unui invitat special din partea unui membru al echipei Samsung Internet Engineering Group, Adil!

Instrumentele de dezvoltare furnizate de browsere sunt tovarășul constant al multor dezvoltatori web. Le putem folosi pentru a ne inspecta codul, pentru a ne spune despre erori și pentru a rula diverse audituri. DevTools din Chrome vă poate oferi, de asemenea, o modalitate de a ajusta dimensiunea afișajului pentru a se potrivi cu cea a dispozitivului mobil. Această funcție este folosită frecvent de mulți dezvoltatori. Unul dintre punctele utile ale acestei funcții este faptul că puteți alege dintre dispozitivele mobile populare, iar DevTools va ajusta dimensiunea ecranului la exact aceeași dimensiune cu cea a dispozitivului respectiv. Astfel putem testa și depana paginile web cu dimensiunea dispozitivului mobil.

Chrome DevTools în modul dispozitiv mobil

Chrome DevTools nu este doar pentru inspectarea elementelor DOM și a atributelor CSS. Îl putem folosi și pentru examinarea cererilor de rețea și a parametrilor legați de accesul la stocare. Mai mult, puteți rula direct codul JavaScript și puteți vedea mesajele din consolă. Nu este uimitor?

Acum, să presupunem că aveți un telefon mobil în mână și că apar probleme specifice, în special pe acest dispozitiv, și că nu puteți reproduce problema folosind DevTools și metoda ilustrată mai sus. Sau, imaginați-vă o situație în care browserul dvs. mobil are API-uri specifice și doriți să le depanați. În acest caz, aveți nevoie de DevTools pe telefonul mobil.

Ceea ce poate nu realizați este că puteți utiliza DevTools pentru desktop pentru depanarea browserelor bazate pe Blink (cum ar fi Samsung Internet) și pe dispozitivele Android.

Pentru a face acest lucru, mai întâi, activați „USB Debugging” pe dispozitivul Android și conectați-l la computer.

Acum, partea interesantă. Accesați URL-ul „chrome://inspect” și apoi faceți clic pe „Devices”. Ura! Veți vedea lista sesiunilor de browser active de pe dispozitivul dvs. mobil.

Click pe „Inspect” și veți vedea vizualizarea browserului de pe computerul dvs. Acum puteți face orice manipulare folosind DevTools.

Puteți accesa lista dispozitivelor mobile și folosind Remote Devices (Dispozitive la distanță) din meniul DevTools.

Sperăm că vă va face plăcere să folosiți această tehnică pentru a simplifica depanarea pe mobil!

.