Hur man felsöker webbsidor på krom för Android på datorn

Som administratör av en blogg felsöker jag min personliga webbplats med Chrome för att se hur förändringarna i temat och CSS skulle se ut innan jag implementerar dem permanent på servern. Jag var inte för länge sedan när jag aldrig uppmärksammade mobila sidor eftersom bara få besökare besökte min webbplats med en smartphone. Men idag består en betydande andel besökare av smartphones och surfplattor, och det har därför blivit nödvändigt att ta hand om utseende och presentation där också.

Om det var en sida på datorn, kunde en enkelt ha felsökt med alternativet från Chromes högerklick-sammanhangsmeny, men det är inte alternativet med sidorna på mobilen. Så idag kommer jag att visa dig hur du kan felsöka mobila webbsidor på din dator med Chrome för Android och Android SDK.

Felsöka webbsidan

Steg 1: Ladda ner och installera Android SDK på din dator och kör den. Installatören kommer att be dig att ladda ner Java om du inte har det installerat.

För första gången du kör Android SDK på din dator kommer den att be dig att ladda ner flera API: er och verktyg. Om ditt enda syfte med att installera Android SDK är att felsöka sidorna, avmarkera allt utom Android SDK-plattformsverktyg och klicka på knappen Installera paket.

Steg 2: Efter installation av Android-plattformsverktyg öppnar du Run Box (Windows + R) och kör % userprofile% \ AppData \ Local \ Android \ android-sdk \ platform-tools för att öppna katalogen för Android-plattformsverktyg.

Steg 3: Håll nu Ctrl + Shift-tangenten och högerklicka i mappen för att öppna kommandotolken där. Du kan också öppna kommandotolken med Run-rutan och navigera till mappen manuellt.

Steg 4: Efter att ha gjort det, öppna Chrome på din Android-telefon, öppna Inställningar -> Utvecklarverktyg och kontrollera alternativet Aktivera USB-webbugging.

Steg 5: Kör nu kommandotolken kommandot adb framåt tcp: 9222 localabstract: chrome_devtools_remote och öppna Chrome-webbläsaren i Windows vid framgångsrik körning.

Steg 6: Öppna sidan du vill felsöka i din Android Chrome-webbläsare och öppna URL: n localhost: 9222 i din dators Chrome-webbläsare.

Det är allt, du kommer att se alla sidor som är öppna i din Android-webbläsare som miniatyrbilder på din dator. För att öppna felsökningssidan klickar du bara på respektive webbplatsens miniatyrbild. Du kan spåra felsökningsändringarna du gör på din dator direkt på Android i realtid.

Slutsats

Jag är säker på att detta trick hjälper många webbutvecklare att optimera sina webbsidor för smartphones. Jag har använt tricket för att konfigurera mina webbsidor och det fungerade som charm. Men om du känner till ett bättre sätt att felsöka smartphone-webbsidor på datorn, dela det med oss.