Come eseguire il debug di pagine Web su Chrome per Android su computer

In qualità di amministratore di un blog, eseguo il debug del mio sito Web personale utilizzando Chrome per vedere come apparirebbero le modifiche al tema e al CSS prima di implementarle in modo permanente sul server. Non molto tempo fa, quando non ho mai pagato attenzione alle pagine mobili poiché solo pochi visitatori hanno visitato il mio sito utilizzando uno smartphone. Ma oggi una percentuale significativa di visitatori è composta da smartphone e tablet, e quindi è diventato necessario occuparsi anche dell'aspetto e della presentazione.

Se fosse una pagina sul computer, si sarebbe potuto facilmente eseguire il debug utilizzando l'opzione dal menu di scelta rapida di Chrome, ma non è l'opzione con le pagine sul cellulare. Quindi, oggi ti mostrerò come eseguire il debug pagine web mobili sul tuo computer utilizzando Chrome per Android e Android SDK.

Debug della pagina Web

Passo 1: Scarica e installa SDK Android sul tuo computer ed eseguilo. Il programma di installazione ti chiederà di scaricare Java se non lo hai installato.

Per la prima volta che esegui Android SDK sul tuo computer, ti verrà chiesto di scaricare diverse API e strumenti. Se l'unico scopo dell'installazione di Android SDK è eseguire il debug delle pagine, deseleziona tutto tranne Strumenti della piattaforma Android SDK e fai clic su Installa pacchetto pulsante.

Passo 2: Dopo aver installato gli strumenti della piattaforma Android, apri la casella Esegui (Windows+R) e corri %userprofile%\AppData\Local\Android\android-sdk\platform-tools per aprire la directory degli strumenti della piattaforma Android.

Passaggio 3: Ora tieni premuto il tasto Ctrl + Maiusc e fai clic con il pulsante destro del mouse nella cartella per aprire il prompt dei comandi lì. Puoi anche aprire il prompt dei comandi utilizzando la casella Esegui e accedere alla cartella manualmente.

Passaggio 4: Fatto ciò, apri Chrome sul tuo telefono Android, apri Impostazioni—>Strumenti per sviluppatori e seleziona l'opzione Abilita debug Web USB.

Passaggio 5: Ora sul prompt dei comandi esegui il comando adb forward tcp: 9222 localabstract: chrome_devtools_remote e apri il browser Chrome su Windows in caso di corretta esecuzione.

Passaggio 6: Apri la pagina di cui desideri eseguire il debug sul browser Chrome Android e apri l'URL host locale: 9222 sul browser Chrome del tuo computer.

Questo è tutto, vedrai tutte le pagine aperte sul tuo browser Android come miniature sul tuo computer. Per aprire la pagina di debug, è sufficiente fare clic sulla rispettiva miniatura del sito web. Sarai in grado di tenere traccia delle modifiche di debug che apporti sul tuo computer direttamente su Android in tempo reale.

Conclusione

Sono sicuro che questo trucco aiuterà molti sviluppatori web a ottimizzare le proprie pagine web per gli smartphone. Ho usato il trucco per configurare le mie pagine web e ha funzionato alla grande. Tuttavia, se conosci un modo migliore per eseguire il debug delle pagine Web dello smartphone sul computer, condividilo con noi.