Sådan fejlsøges websider på krom til Android på computeren

Som administrator af en blog debugger jeg mit personlige websted ved hjælp af Chrome for at se, hvordan ændringerne i temaet og CSS ville se ud, før jeg implementerer dem permanent på serveren. Jeg var ikke længe siden, da jeg aldrig opmærksomme på mobile sider, da kun få besøgende besøgte mit websted ved hjælp af en smartphone. Men i dag består en betydelig procentdel af besøgende af smartphones og tablets, og det er derfor også nødvendigt at tage sig af udseende og præsentation der.

Hvis det var en side på computeren, kunne en let have debugged ved hjælp af indstillingen fra Chromes højreklik-kontekstmenu, men det er ikke indstillingen med siderne på mobilen. Så i dag vil jeg vise dig, hvordan du kan fejlsøge mobile websider på din computer ved hjælp af Chrome til Android og Android SDK.

Fejlsøgning af websiden

Trin 1: Download og installer Android SDK på din computer og kør den. Installationsprogrammet beder dig downloade Java, hvis du ikke har det installeret.

For første gang du kører Android SDK på din computer, vil den bede dig om at downloade flere API'er og værktøjer. Hvis dit eneste formål med at installere Android SDK er at fejlsøge siderne, skal du fjerne markeringen af ​​alt undtagen Android SDK Platform-værktøjer og klikke på knappen Installer pakke.

Trin 2: Efter installation af Android platformværktøjer skal du åbne Run Box (Windows + R) og køre % userprofile% \ AppData \ Local \ Android \ android-sdk \ platform-tools for at åbne biblioteket til Android platform værktøjer.

Trin 3: Hold nu Ctrl + Shift nede og højreklik i mappen for at åbne kommandoprompten der. Du kan også åbne kommandoprompten ved hjælp af Kør-boksen og navigere til mappen manuelt.

Trin 4: Når du har gjort det, skal du åbne Chrome på din Android-telefon, åbne Indstillinger-> Udviklerværktøjer og kontrollere indstillingen Aktiver USB-webfejlfinding.

Trin 5: Kør nu kommandoprompten adb fremad tcp: 9222 localabstract: chrome_devtools_remote og åbn Chrome browser i Windows ved vellykket udførelse.

Trin 6: Åbn den side, du vil fejlsøge i din Android Chrome-browser, og åbn URL-adressen localhost: 9222 i din computers Chrome-browser.

Det er alt, du vil se alle siderne, der er åbne i din Android-browser som miniaturebilleder på din computer. For at åbne fejlsiden skal du blot klikke på den respektive webside-miniature. Du vil være i stand til at spore de fejlfindingsændringer, du foretager på din computer direkte på Android i realtid.

Konklusion

Jeg er sikker på, at dette trick vil hjælpe mange webudviklere med at optimere deres websider til smartphones. Jeg har brugt tricket til at konfigurere mine websider, og det fungerede som charme. Men hvis du kender til en bedre måde at fejlsøge smartphone-websider på computeren, skal du dele det med os.