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 sarebbero le modifiche al tema e al CSS prima di implementarle in modo permanente sul server. Non molto tempo fa 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 stata una pagina sul computer, sarebbe stato possibile eseguire facilmente il debug utilizzando l'opzione dal menu di scelta rapida del pulsante destro del mouse di Chrome, ma non è l'opzione con le pagine sui dispositivi mobili. Quindi, oggi ti mostrerò come puoi 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 fare 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 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 usando la casella Esegui e accedere manualmente alla cartella.

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 esecuzione corretta.

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, fai semplicemente clic sulla rispettiva miniatura del sito Web. Sarai in grado di tracciare le 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 smartphone. Ho usato il trucco per configurare le mie pagine web e ha funzionato a meraviglia. Tuttavia, se conosci un modo migliore per eseguire il debug delle pagine Web degli smartphone sul computer, condividilo con noi.

Ultimo aggiornamento il 03 febbraio 2022

L'articolo sopra può contenere link di affiliazione che aiutano a supportare Guiding Tech. Tuttavia, non pregiudica la nostra integrità editoriale. Il contenuto rimane imparziale e autentico.