Selaimien tarjoamat kehittäjätyökalut ovat monien web-kehittäjien vakituinen kumppani. Niiden avulla voimme tarkastaa koodimme, kertoa virheistä ja suorittaa erilaisia tarkastuksia. Chromen DevTools-työkalut voivat myös tarjota tavan säätää näytön kokoa mobiililaitteen mukaan. Tätä ominaisuutta monet kehittäjät käyttävät usein. Yksi tämän ominaisuuden hyödyllisistä puolista on se, että voit valita suosittujen mobiililaitteiden joukosta, ja DevTools säätää näytön koon täsmälleen samaksi kuin kyseisellä laitteella. Näin voimme testata ja debugata verkkosivuja mobiililaitteen koon mukaan.

Chrome DevTools ei ole vain DOM-elementtien ja CSS-attribuuttien tarkasteluun. Voimme käyttää sitä myös verkkopyyntöjen tutkimiseen ja tallennukseen liittyvien parametrien käyttämiseen. Lisäksi voit ajaa JavaScript-koodia suoraan ja nähdä viestit konsolista. Eikö olekin hämmästyttävää?

Asettele nyt, että sinulla on kädessäsi matkapuhelin, ja erityisesti tällä laitteella tapahtuu tiettyjä ongelmia, etkä pysty toistamaan ongelmaa DevToolsilla ja edellä kuvatulla menetelmällä. Tai kuvittele tilanne, jossa mobiiliselaimellasi on erityisiä API:ita, ja haluat debugata niitä. Tässä tapauksessa tarvitset DevToolsia matkapuhelimessasi.

Mitä et ehkä ymmärrä, on se, että voit käyttää työpöydän DevToolsia Blink-pohjaisten selainten (kuten Samsung Internet) debuggaamiseen myös Android-laitteissasi.

Tehdäksesi niin, ota ensin käyttöön ”USB-vianmääritys” Android-laitteessasi ja liitä se tietokoneeseen.

Ja nyt jännittävimpään kohtaan. Siirry URL-osoitteeseen ”chrome://inspect” ja napsauta sitten ”Devices”. Hurraa! Näet luettelon mobiililaitteesi aktiivisista selainistunnoista.

Klikkaa ”Tarkista”, niin näet selainnäkymän tietokoneellasi. Nyt voit tehdä mitä tahansa käsittelyjä DevToolsilla.

Mobiililaitteiden luetteloon pääset käsiksi myös DevTools-valikosta löytyvällä Remote Devices -toiminnolla.

Toivottavasti nautit siitä, että voit käyttää tätä tekniikkaa, jonka avulla mobiililaitteella tapahtuva virheenkorjaus on yksinkertaisempaa!