Kako si ogledate svoje spletno mesto na različnih napravah z uporabo Google Chroma

Ko ustvarite spletno mesto, želite, da je odzivno in se prilagaja različnim velikostim zaslona. Eden od načinov za testiranje tega je uporaba vgrajenih orodij za razvijalce v brskalniku Google Chrome.

Chromova orodja DevTools vam omogočajo odpravljanje napak na različnih vidikih vašega spletnega mesta. To vključuje spreminjanje in predogled izvorne kode HTML in CSS. Omogoča vam tudi odpravljanje napak kode JavaScript na strani odjemalca in ogled omrežnega prometa.

DevTools ima tudi možnost predogleda vašega spletnega mesta na različnih napravah. To vključuje različne vrste mobilnih naprav, iPade, tablice in drugo.

Če želite odpreti orodno vrstico naprave v Google Chromu, morate odpreti Okno Chromovih orodij za razvijalce:

1. Odprite spletno mesto.
2. Z desno miškino tipko kliknite stran in kliknite na Preglejte.
3. Odpre se okno Chrome DevTools. Odpre se lahko ob strani ali na dnu brskalnika ali kot novo okno.
4. V zgornjem levem kotu okna sta dve ikoni. Kliknite ikono, ki prikazuje več naprav različnih velikosti.
instagram viewer
5. Zaslon se bo spremenil in prikazal, kako bi izgledalo spletno mesto na mobilni napravi.

Kako preklapljati med različnimi napravami

Za preklapljanje med različnimi napravami uporabite spustni meni na vrhu orodne vrstice naprave.

1. Na samem vrhu orodne vrstice bo prikazano, v kateri vrsti naprave trenutno gledate svoje spletno mesto. Kliknite spustni meni, da izberete drugo napravo s seznama.
2. Namesto da izberete obstoječo napravo, lahko izberete ogled spletnega mesta v odzivnem načinu. Kliknite spustni meni in izberite Odzivno možnost.
3. Poleg spustnega menija lahko izberete tudi vnos širine in višine naprave po meri.
4. Namesto da bi vnesli širino in višino, lahko tudi kliknete in povlečete vogale okna, da prilagodite velikost.

Kako dodati napravo po meri

Če želite shraniti širino in višino po meri, lahko dodate napravo po meri. Orodna vrstica naprave bo nato prikazala vašo novo napravo v spustnem meniju za naprave.

1. Kliknite spustni meni, ki navaja vse naprave.
2. Kliknite na Uredi.
3. Pod stransko vrstico Nastavitve se prepričajte, da imate Naprave izbran zavihek. Tukaj si lahko ogledate tudi seznam več naprav, med katerimi lahko izbirate.
4. Kliknite na Dodajte napravo po meri.
5. Vnesite ime, širino in višino za napravo. Prepričajte se, da ste izbrali tudi vrsto naprave, na primer, ali gre za mobilno ali namizno napravo. Če razširite Namigi odjemalca uporabniškega agenta možnost, lahko dodate druge podrobnosti, kot so model naprave, znamka ali različica.
6. Kliknite na Dodaj.
7. Vrnite se na spustni meni, ki navaja vse naprave. Na seznamu boste videli svojo novo napravo po meri.
8. Te podrobnosti lahko pozneje znova uredite tako, da se vrnete na stran naprave po meri. Kliknite na Uredi gumb poleg imena vaše naprave, da začnete urejati.

Zelo koristno je, da si lahko svoje spletno mesto ogledate na različnih napravah in velikostih zaslona iz več razlogov.

Najprej lahko preizkusite delovanje svojega spletnega mesta na različnih napravah. Nekateri mobilni telefoni imajo lahko hitrejše omrežne hitrosti ali upočasnitev CPE kot drugi.

Orodna vrstica naprave vam omogoča preklapljanje med različnimi možnostmi hitrosti omrežja. To vam omogoča, da preizkusite hitrost kakršnih koli klicev na strežnik ali preizkusite nalaganje in upodabljanje podatkov na vašem spletnem mestu.

Poleg tega si lahko ogledate tudi, kako izgleda dizajn na določeni napravi z vidika uporabniškega vmesnika. Če uporabljate CSS medijske poizvedbe, lahko s tem orodjem preverite, ali delujejo, kot pričakujete.

Z oknom DevTools v brskalniku Google Chrome lahko preizkusite, kako se vaše spletno mesto prilagaja različnim velikostim zaslona, ​​in zagotovite odzivnost spletnega mesta. Uporabite ga lahko tudi za testiranje učinkovitosti vašega spletnega mesta in ali vaše medijske poizvedbe delujejo po pričakovanjih.

Orodja za razvijalce Google Chrome lahko uporabite tudi za druge namene. Uporabite ga lahko za odpravljanje težav s CSS tako, da spremenite CSS na zavihku Slogi v oknu Element. To vam omogoča, da si takoj ogledate vse spremembe CSS, kar lahko pospeši vaš potek dela kodiranja.

Kako uporabljati Google Chrome za odpravljanje napak v CSS

Preberite Naprej