Kada izradite web stranicu, želite da ona bude responzivna i da se prilagođava različitim veličinama zaslona. Jedan od načina da to testirate je korištenje Google Chromeovih ugrađenih razvojnih alata.

Chromeovi DevTools omogućuju vam otklanjanje pogrešaka u različitim aspektima vaše web stranice. To uključuje promjenu i pregled HTML izvornog koda i CSS-a. Također vam omogućuje ispravljanje pogrešaka JavaScript koda na strani klijenta i pregled mrežnog prometa.

DevTools također ima opciju pregleda vaše web stranice na različitim uređajima. To uključuje različite vrste mobilnih uređaja, iPada, tableta i još mnogo toga.

Da biste otvorili alatnu traku uređaja na Google Chromeu, trebate otvoriti Prozor Chrome Developer Tools:

  1. Otvorite web stranicu.
  2. Desnom tipkom miša kliknite na stranicu i kliknite na Pregledati.
  3. Otvorit će se prozor Chrome DevTools. Može se otvoriti sa strane ili na dnu vašeg preglednika ili kao novi prozor.
  4. U gornjem lijevom dijelu prozora nalaze se dvije ikone. Kliknite na ikonu koja prikazuje više uređaja različitih veličina.
    5. instagram viewer
  5. Zaslon će se promijeniti kako bi vam pokazao kako bi web stranica izgledala na mobilnom uređaju.

Kako se prebacivati ​​između različitih uređaja

Koristite padajući izbornik na vrhu alatne trake uređaja za prebacivanje između različitih uređaja.

  1. Na samom vrhu alatne trake prikazat će se na kojoj vrsti uređaja trenutno gledate svoju web stranicu. Kliknite na padajući izbornik za odabir drugog uređaja s popisa.
  2. Umjesto odabira postojećeg uređaja, možete odabrati prikaz web stranice u responzivnom načinu. Kliknite na padajući izbornik i odaberite Uzvratni opcija.
  3. Pored padajućeg izbornika možete odabrati i unos prilagođene širine i visine uređaja.
  4. Umjesto da upisujete širinu i visinu, možete kliknuti i povući kutove prozora da biste prilagodili veličinu.

Kako dodati prilagođeni uređaj

Ako želite spremiti prilagođenu širinu i visinu, možete dodati prilagođeni uređaj. Alatna traka uređaja tada će prikazati vaš novi uređaj u padajućem izborniku za uređaje.

  1. Kliknite na padajući izbornik koji prikazuje sve uređaje.
  2. Kliknite na Uredi.
  3. Ispod bočne trake Postavke provjerite imate li Uređaji odabrana kartica. Ovdje također možete vidjeti popis više uređaja koje možete birati.
  4. Kliknite na Dodajte prilagođeni uređaj.
  5. Unesite naziv, širinu i visinu uređaja. Provjerite jeste li također odabrali vrstu uređaja, na primjer radi li se o mobilnom ili stolnom uređaju. Ako proširite Savjeti klijenta korisničkog agenta opciju, možete dodati druge pojedinosti kao što su model uređaja, marka ili verzija.
  6. Kliknite na Dodati.
  7. Vratite se na padajući izbornik koji navodi sve uređaje. Na popisu ćete vidjeti svoj novi prilagođeni uređaj.
  8. Te pojedinosti možete ponovno urediti kasnije tako da se vratite na stranicu prilagođenog uređaja. Klikni na Uredi gumb pored naziva uređaja za početak uređivanja.

Vrlo je korisno moći pregledati svoju web stranicu na različitim uređajima i veličinama zaslona, ​​iz nekoliko razloga.

Prvo, možete testirati izvedbu svoje web stranice na različitim uređajima. Neki mobiteli mogu imati veće brzine mreže ili CPU prigušivanje od drugih.

Alatna traka uređaja omogućuje vam prebacivanje između različitih opcija brzine mreže. To vam omogućuje da testirate brzinu bilo kojeg poziva na poslužitelj ili da testirate učitavanje i prikazivanje podataka na vašoj web stranici.

Osim toga, možete vidjeti kako dizajn izgleda na određenom uređaju, s gledišta korisničkog sučelja. Ako koristite CSS medijski upiti, možete koristiti ovaj alat da provjerite rade li kako očekujete.

Možete koristiti prozor DevTools u pregledniku Google Chrome kako biste testirali kako se vaša web-lokacija prilagođava različitim veličinama zaslona i kako biste bili sigurni da vaša web-lokacija reagira. Također ga možete koristiti za testiranje performansi svoje web stranice i rade li vaši medijski upiti prema očekivanjima.

Također možete koristiti Google Chromeove DevTools u druge svrhe. Možete ga koristiti za otklanjanje pogrešaka u bilo kojem CSS-u tako da promijenite CSS na kartici Stilovi u prozoru Element. To vam omogućuje da odmah vidite sve promjene CSS-a, što može ubrzati vaš tijek kodiranja.

Kako koristiti Google Chrome za otklanjanje pogrešaka u CSS-u

Pročitajte dalje

UdioCvrkutUdioE-mail

Povezane teme

  • Programiranje
  • Google Chrome
  • Web razvoj
  • Web dizajn

O autoru

Sharlene Von Drehnen (Objavljeno 19 članaka)

Sharlene je tehnička spisateljica u MUO-u, a također radi puno radno vrijeme u razvoju softvera. Diplomirala je informatiku i ima prethodno iskustvo u osiguravanju kvalitete i sveučilišnom podučavanju. Sharlene voli igre i sviranje klavira.

Više od Sharlene Von Drehnen

Pretplatite se na naše obavijesti

Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e-knjige i ekskluzivne ponude!

Kliknite ovdje za pretplatu