Imituokite mobiliuosius įrenginius „Google Chrome“

Kurdami svetainę ar žiniatinklio programą visada turime užduotį patikrinti, ar viskas tinkamai veikia mobiliajame įrenginyje ar net planšetiniame kompiuteryje. Jei dirbame kurdami, mes neturime, kaip tai patikrinti, nes pirmiausia turėtume nusiųsti pakeitimus į serverį ir ten patarti savo mobiliajame įrenginyje.

Tačiau neturėtume jaudintis, nes „Google Chrome“ turi funkciją, leidžiančią atlikti kelis paprastus veiksmus, kad patikrintume, kaip mūsų svetainė ar programa veikia norimame mobiliajame įrenginyje.

1. Imituokite mobilųjį įrenginį „Google Chrome“


Kaip sakome, „Google Chrome“ yra į kūrėjus orientuotas įrankis, su kuriuo iš pirmo žvilgsnio galime pasiekti neįtrauktas parinktis. Vienas iš jų yra mobiliojo įrenginio emuliatorius įrenginio režimu.

1 žingsnis
Apačioje turėsime meniu, kuriame bus rodomas puslapio HTML kodas. Norėdami parodyti „Chrome“ kūrėjų skydelį, eisime į „Meniu / Daugiau įrankių / Kūrėjo įrankiai“ arba atliksime šį klavišų derinį:

„Windows“ ir „Linux“

„Ctrl“ + „Shift“ + M.

„Mac“

⇧ + ⌘ + M.

2 žingsnis
Pamatysime, kad atsidaro kodų skydelis. Mes žiūrime į piktogramą, atitinkančią „Įrenginio režimą“ ir kuri bus suaktyvinta, kai ji pasirodys mėlyna. Spustelėkite jį, kad jį suaktyvintumėte.

3 žingsnis
Nors ten mes einame į viršutinį meniu virš emuliuoto puslapio ir pasirenkame įrenginį, kurį norime imituoti, šiuo atveju pasirenkame „Apple iPhone x“ ir atnaujiname, kad pakeitimai įsigaliotų. Turime daugybę iš anksto nustatytų konfigūracijų, kad vienu paspaudimu turėtume savo modeliuotą modelį.

4 žingsnis
Jei norime sukurti pasirinktinius matavimus, eisime ten, kur rodomas terminalo modelis, ir spustelėkite „Redaguoti“.

5 žingsnis
Bus rodomi tie modeliai, kurie anksčiau buvo konfigūruotojai, arba mes galime juos pridėti individualiai, spustelėdami „Pridėti pasirinktinį įrenginį“.

6 žingsnis
Įrenginio režimo parinktyse turėsime galimybę įjungti jutiklinį ekraną imituojančius jutiklius.

PastabaSpustelėkite trijų taškų piktogramą, kad, be kita ko, būtų rodoma parinktis „Jutikliai“

2. Imituokite mobiliojo tinklo ryšį „Google Chrome“


Tinklo būklė ir jo bandymai „Chrome“ dėka leidžia mums išbandyti savo svetainę naudojant įvairių tipų tinklo ryšius, pvz., 3G ir net neprisijungus.

1 žingsnis
Taip pat galime imituoti tinklą, kuriame esame. Norėdami tai padaryti, einame į skirtuką „Tinklas“ ir sulankstomame sąraše pasirenkame tinklo tipą.

2 žingsnis
Jei nustatysime limitą, pamatysime įspėjamąjį pranešimą, primenantį, kad mes jį įgalinome.

3. Pridėkite mobiliojo tinklo ryšio apribojimus „Google Chrome“

1 žingsnis
Ši riba yra svarbi ir mes galime nustatyti pasirinktinius apribojimus su sąlygomis, kurias sukonfigūravome patys. Norėdami tai padaryti, paspauskite šį klavišą, kad atidarytumėte nustatymų skydelį.

F1

2 žingsnis
Spustelėkite parinktį „Droselis“. Mes pasirenkame parinktį „Pridėti pasirinktinį profilį“.

3 žingsnis
Čia mes nustatysime ribų nustatymus pasirinktinai.

4. „Google Chrome“ atidarykite tinklo sąlygų skydelį


„DevTools“ kūrėjų skydelyje turime daugiau galimybių.

1 žingsnis
Norėdami tai padaryti, einame į trijų taškų meniu dešinėje ir spustelėkite „Daugiau įrankių“ / „Tinklo sąlygos“.

2 žingsnis
Čia galime įjungti arba išjungti talpyklą ir pakeisti numatytąjį agentą į pasirinktinį.

Naudodami šią funkciją mums nebereikės ieškoti savo mobiliojo telefono, kad patikrintume, ar mūsų svetainė ar programa veikia tinkamai, kiekvienas turi tik šiek tiek daugiau ištirti šį įrankį ir jį naudoti, kad sutrumpintų testavimo ir diegimo laiką.

wave wave wave wave wave