androide

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

Come usare lo strumento Ispeziona di Chrome

Come usare lo strumento Ispeziona di Chrome

Sommario:

Anonim

Come amministratore di un blog, eseguo il debug del mio sito Web personale utilizzando Chrome per vedere come sarebbero le modifiche al tema e ai CSS prima di implementarle permanentemente sul server. Non molto tempo fa non ho mai prestato attenzione alle pagine mobili poiché solo pochi visitatori hanno visitato il mio sito utilizzando uno smartphone. Ma oggi, una percentuale significativa di visitatori comprende smartphone e tablet, e quindi è diventato necessario occuparsi anche di aspetto e presentazione.

Se si trattasse di una pagina sul computer, si sarebbe potuto eseguire facilmente il debug di una pagina utilizzando l'opzione dal menu contestuale di Chrome con il tasto destro del mouse, ma questa non è l'opzione con le pagine sui dispositivi mobili. Quindi, oggi ti mostrerò come eseguire il debug delle pagine Web mobili sul tuo computer utilizzando Chrome per Android e Android SDK.

Debug della pagina Web

Passaggio 1: scarica e installa Android SDK 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 il tuo unico scopo di installare Android SDK è il debug delle pagine, deseleziona tutto tranne gli strumenti della piattaforma SDK Android e fai clic sul pulsante Installa pacchetto.

Passaggio 2: dopo aver installato gli strumenti della piattaforma Android, aprire la casella Esegui (Windows + R) ed eseguire % 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. È inoltre possibile aprire il prompt dei comandi utilizzando la casella Esegui e passare 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 eseguire il comando adb forward tcp: 9222 localabstract: chrome_devtools_remote e aprire il browser Chrome su Windows in caso di esecuzione corretta.

Passaggio 6: apri la pagina di cui desideri eseguire il debug sul browser Android Chrome e apri l'URL localhost: 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 al debug apportate sul tuo computer direttamente su Android in tempo reale.

Conclusione

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