Un post speciale ospite dal membro del gruppo di ingegneria Samsung Internet, Adil!
Gli strumenti di sviluppo forniti dai browser sono il compagno costante di molti sviluppatori web. Possiamo usarli per ispezionare il nostro codice, segnalarci errori ed eseguire vari controlli. DevTools in Chrome può anche fornire un modo per regolare la dimensione del display per adattarlo al dispositivo mobile. Questa caratteristica è usata frequentemente da molti sviluppatori. Uno dei punti utili di questa caratteristica è che si può scegliere tra i dispositivi mobili più popolari, e DevTools regolerà la dimensione dello schermo esattamente come quel dispositivo. In questo modo possiamo testare e fare il debug delle pagine web con le dimensioni del dispositivo mobile.
Chrome DevTools non è solo per ispezionare elementi DOM e attributi CSS. Possiamo usarlo anche per esaminare le richieste di rete e i parametri di accesso allo storage. Inoltre, è possibile eseguire direttamente il codice JavaScript e vedere i messaggi dalla console. Non è incredibile?
Ora, supponiamo che abbiate un telefono cellulare in mano, e che si verifichino problemi specifici, in particolare su questo dispositivo, e che non siate in grado di riprodurre il problema utilizzando DevTools e il metodo illustrato sopra. Oppure, immaginate una situazione in cui il vostro browser mobile ha delle API specifiche e volete farne il debug. In questo caso, hai bisogno di DevTools sul tuo cellulare.
Quello di cui forse non ti rendi conto è che puoi usare DevTools sul desktop per il debug dei browser basati su Blink (come Samsung Internet) anche sui tuoi dispositivi Android.
Per farlo, per prima cosa, abilitate il “Debug USB” sul vostro dispositivo Android e collegatelo al vostro computer.
Ora la parte emozionante. Accedi all’URL “chrome://inspect” e poi clicca su “Dispositivi”. Urrà! Vedrai la lista delle sessioni attive del browser dal tuo dispositivo mobile.
Clicca su “Inspect,” e vedrai la vista del browser sul tuo computer. Ora puoi fare qualsiasi manipolazione usando DevTools.
Puoi accedere alla lista dei dispositivi mobili anche usando Remote Devices dal menu DevTools.
Spero che ti piacerà usare questa tecnica per rendere più semplice il debugging sul tuo cellulare!