A DevTools “titka” a mobil webfejlesztők számára

Adil Aliyev

Follow

nov. 29, 2018 – 3 min read

Egy különleges vendégposzt a Samsung Internet engineering group team tagjától, Adiltól!

A böngészők által biztosított fejlesztői eszközök sok webfejlesztő állandó kísérője. Segítségükkel ellenőrizhetjük a kódunkat, szólnak a hibákról és különböző ellenőrzéseket futtathatunk. A Chrome-ban található DevTools lehetőséget biztosíthat arra is, hogy a kijelző méretét a mobileszközünkhöz igazítsuk. Ezt a funkciót sok fejlesztő gyakran használja. A funkció egyik hasznos pontja, hogy a népszerű mobileszközök közül választhatunk, és a DevTools pontosan az adott eszközhöz igazítja a képernyőméretet. Így a weboldalakat a mobileszköz méretének megfelelően tesztelhetjük és hibakereshetjük.

Chrome DevTools mobileszköz módban

A Chrome DevTools nem csak a DOM elemek és CSS attribútumok vizsgálatára szolgál. Használhatjuk a hálózati kérések vizsgálatára és a tárolással kapcsolatos paraméterek elérésére is. Sőt, közvetlenül futtathatunk JavaScript kódot, és megtekinthetjük a konzolon megjelenő üzeneteket. Hát nem elképesztő?

Tegyük fel, hogy egy mobiltelefon van a kezünkben, és konkrét problémák lépnek fel, különösen ezen a készüléken, és a DevTools és a fent bemutatott módszer segítségével nem tudjuk reprodukálni a problémát. Vagy képzeljünk el egy olyan helyzetet, amikor a mobilböngészőnek speciális API-jai vannak, és ezeket szeretnénk hibakeresésre használni. Ebben az esetben szüksége van a DevToolsra a mobiltelefonján.

Azt talán nem tudja, hogy az asztali DevTools-t használhatja a Blink-alapú böngészők (például a Samsung Internet) hibakeresésére az Android-eszközökön is.

Ehhez először is engedélyezze az “USB Debugging” funkciót az Android készülékén, és csatlakoztassa azt a számítógépéhez.

Most jön az izgalmas rész. Lépjen be a “chrome://inspect” URL-címre, majd kattintson az “Eszközökre”. Hurrá! Megjelenik a mobileszköz aktív böngésző munkameneteinek listája.

Kattintson az “Inspect”-re, és megjelenik a böngésző nézete a számítógépén. Most már bármilyen manipulációt elvégezhet a DevTools segítségével.

A mobileszközök listáját a DevTools menüből a Remote Devices segítségével is elérheti.

Remélhetőleg élvezettel fogja használni ezt a technikát, hogy egyszerűbbé tegye a hibakeresést a mobilján!