Web-sivujen virheenkorjaus Chromessa androidille tietokoneella

Blogin ylläpitäjänä debugin henkilökohtaisen verkkosivustoni Chromen avulla nähdäkseni miltä teeman ja CSS: n muutokset näyttäisivät ennen kuin ne otetaan pysyvästi käyttöön palvelimella. En ollut kauan sitten, kun en koskaan kiinnittänyt huomiota mobiilisivuihin, koska vain harvat vierailijat kävivät sivustollani älypuhelimen avulla. Mutta nykyään huomattava osa kävijöistä koostuu älypuhelimista ja tablet-laitteista, ja sen vuoksi on tullut tarpeellista huolehtia myös ulkoasusta ja esittelystä siellä.

Jos kyseessä oli tietokoneen sivu, virheen olisi voinut helposti korjata käyttämällä Chromen hiiren kakkospainikkeen pikavalikon vaihtoehtoa, mutta se ei ole vaihtoehto mobiililaitteiden sivuille. Joten tänään näytän sinulle, kuinka voit debugoida tietokoneesi mobiilisivuja käyttämällä Chrome for Androidia ja Android SDK: ta.

Web-sivun virheenkorjaus

Vaihe 1: Lataa ja asenna Android SDK tietokoneellesi ja suorita se. Asennusohjelma pyytää sinua lataamaan Java, jos sinulla ei ole sitä asennettuna.

Kun käytät Android SDK: tä ensimmäistä kertaa tietokoneellasi, se pyytää sinua lataamaan useita sovellusliittymiä ja työkaluja. Jos Android SDK: n asentamisen ainoa tarkoitus on sivujen virheenkorjaus, poista kaikki valinnat paitsi Android SDK Platform -työkalut ja napsauta Asenna paketti -painiketta.

Vaihe 2: Kun olet asentanut Android-alustotyökalut, avaa Suoritusruutu (Windows + R) ja suorita % userprofile% \ AppData \ Local \ Android \ android-sdk \ platform-tools avataksesi Android-alustan työkaluhakemiston.

Vaihe 3: Pidä nyt Ctrl + Vaihto-näppäintä ja napsauta hiiren kakkospainikkeella kansiossa avataksesi komentokehotteen. Voit myös avata komentokehotteen Suorita-ruudulla ja siirtyä kansioon manuaalisesti.

Vaihe 4: Kun olet tehnyt tämän, avaa Chrome Android-puhelimellasi, avaa Asetukset-> Kehittäjän työkalut ja valitse Ota käyttöön USB-Internet-virheenkorjaus -vaihtoehto.

Vaihe 5: Suorita nyt komentokehotteessa komento adb forward tcp: 9222 localab Abstract: chrome_devtools_remote ja avaa Chrome-selain Windowsissa onnistuneen suorituksen yhteydessä.

Vaihe 6: Avaa sivu, jonka haluat korjata Android Chrome -selaimessa, ja avaa URL-osoite localhost: 9222 tietokoneesi Chrome-selaimella.

Siinä kaikki, näet kaikki Android-selaimessa avoinna olevat sivut pikkukuvina tietokoneellasi. Voit avata virhesivun napsauttamalla vain vastaavan verkkosivun pikkukuvaa. Voit seurata tietokoneessa tekemiäsi virheenkorjausmuutoksia suoraan Androidilla reaaliajassa.

johtopäätös

Olen varma, että tämä temppu auttaa monia web-kehittäjiä optimoimaan verkkosivunsa älypuhelimiin. Olen käyttänyt temppua verkkosivujen määrittämiseen ja se toimi kuten viehätys. Jos tiedät kuitenkin paremman tavan viedä älypuhelinten verkkosivuja tietokoneeseen, jaa se meidän kanssamme.