Ako zobraziť ukážku svojich webových stránok na rôznych zariadeniach pomocou prehliadača Google Chrome

Keď vytvárate webovú stránku, chcete, aby bola responzívna a prispôsobila sa rôznym veľkostiam obrazovky. Jedným zo spôsobov, ako to otestovať, je použitie vstavaných vývojárskych nástrojov prehliadača Google Chrome.

Nástroje DevTools prehliadača Chrome vám umožňujú ladiť rôzne aspekty vášho webu. To zahŕňa zmenu a zobrazenie ukážky zdrojového kódu HTML a CSS. Umožňuje vám tiež ladiť kód JavaScript na strane klienta a zobraziť sieťovú prevádzku.

DevTools má tiež možnosť zobraziť ukážku vášho webu na rôznych zariadeniach. Patria sem rôzne typy mobilných zariadení, iPady, tablety a ďalšie.

Ak chcete otvoriť panel s nástrojmi zariadenia v prehliadači Google Chrome, musíte otvoriť Okno nástrojov pre vývojárov prehliadača Chrome:

1. Otvorte webovú stránku.
2. Kliknite pravým tlačidlom myši na stránku a kliknite na Skontrolujte.
3. Otvorí sa okno Chrome DevTools. Môže sa otvoriť na bočnej alebo spodnej strane prehliadača alebo ako nové okno.
4. V ľavej hornej časti okna sú dve ikony. Kliknite na ikonu, ktorá zobrazuje viacero zariadení rôznych veľkostí.
instagram viewer
5. Obrazovka sa zmení a ukáže vám, ako by webová lokalita vyzerala na mobilnom zariadení.

Ako prepínať medzi rôznymi zariadeniami

Na prepínanie medzi rôznymi zariadeniami použite rozbaľovaciu ponuku v hornej časti panela s nástrojmi zariadenia.

1. Úplne hore na paneli s nástrojmi sa zobrazí, na akom type zariadenia si práve prezeráte svoj web. Kliknutím na rozbaľovaciu ponuku vyberte iné zariadenie zo zoznamu.
2. Namiesto výberu existujúceho zariadenia si môžete zvoliť zobrazenie webovej stránky v responzívnom režime. Kliknite na rozbaľovaciu ponuku a vyberte možnosť Reagujúce možnosť.
3. Vedľa rozbaľovacej ponuky môžete tiež zadať vlastnú šírku a výšku zariadenia.
4. Namiesto zadávania šírky a výšky môžete veľkosť upraviť aj kliknutím a potiahnutím rohov okna.

Ako pridať vlastné zariadenie

Ak chcete uložiť vlastnú šírku a výšku, môžete pridať vlastné zariadenie. Panel s nástrojmi zariadenia potom zobrazí vaše nové zariadenie v rozbaľovacej ponuke zariadení.

1. Kliknite na rozbaľovaciu ponuku so zoznamom všetkých zariadení.
2. Kliknite na Upraviť.
3. Na postrannom paneli Nastavenia sa uistite, že máte Zariadenia vybratá karta. Tu si tiež môžete zobraziť zoznam ďalších zariadení, z ktorých si môžete vybrať.
4. Kliknite na Pridať vlastné zariadenie.
5. Zadajte názov, šírku a výšku zariadenia. Uistite sa, že ste vybrali aj typ zariadenia, napríklad či ide o mobilné alebo stolné zariadenie. Ak rozšírite Tipy klienta používateľského agenta môžete pridať ďalšie podrobnosti, ako je model zariadenia, značka alebo verzia.
6. Kliknite na Pridať.
7. Vráťte sa do rozbaľovacej ponuky so zoznamom všetkých zariadení. V zozname uvidíte svoje nové vlastné zariadenie.
8. Tieto podrobnosti môžete neskôr znova upraviť tak, že sa vrátite na stránku vlastného zariadenia. Klikni na upraviť vedľa názvu zariadenia, čím spustíte úpravy.

Je veľmi užitočné mať možnosť zobraziť ukážku svojej webovej stránky na rôznych zariadeniach a veľkostiach obrazovky, a to z niekoľkých dôvodov.

Po prvé, môžete otestovať výkon svojho webu na rôznych zariadeniach. Niektoré mobily môžu mať vyššiu rýchlosť siete alebo obmedzovanie CPU ako iné.

Panel s nástrojmi zariadenia vám umožňuje prepínať medzi rôznymi možnosťami rýchlosti siete. To vám umožňuje otestovať rýchlosť akýchkoľvek hovorov na server alebo otestovať načítanie a vykresľovanie údajov na vašom webe.

Okrem toho si môžete pozrieť, ako vyzerá dizajn na konkrétnom zariadení z pohľadu používateľského rozhrania. Ak používate Dopyty na médiá CSS, pomocou tohto nástroja môžete skontrolovať, či fungujú podľa vašich predstáv.

Pomocou okna DevTools prehliadača Google Chrome môžete otestovať, ako sa vaše webové stránky prispôsobujú rôznym veľkostiam obrazovky, a zabezpečiť, aby vaše webové stránky boli responzívne. Môžete ho použiť aj na otestovanie výkonu svojho webu a ak vaše mediálne dopyty fungujú podľa očakávania.

DevTools prehliadača Google Chrome môžete použiť aj na iné účely. Môžete ho použiť na ladenie akýchkoľvek problémov s CSS zmenou CSS na karte Štýly v okne Element. To vám umožní okamžite zobraziť akékoľvek zmeny CSS, čo môže urýchliť váš pracovný postup kódovania.

Ako používať Google Chrome na ladenie CSS

Prečítajte si ďalej