Responzivni inspektor za Chrome odličan je alat za učenje odgovornog dizajna

click fraud protection

Chrome nije baš velik na alatima za razvojne programere i to je jedan od razloga zašto je Firefox većina preglednika preglednik koji ide na preglednik. Međutim, za one koji upotrebljavaju Chrome, na raspolaganju su mnoga proširenja koja im mogu pomoći u tom pogledu. Odgovorni inspektor je proširenje za Chrome koje s pravom može nadmetati responzivni dizajn dizajna koji je Mozilla predstavila Firefox 15. Responzivni inspektor je alat dva u jednom; prikazuje vam veličine zaslona za koje je web mjesto optimizirano i brzo vam omogućuje prelazak na drugačiju od skočnih prozora. Nadalje, mogu se snimiti snimke web stranice prilagođene bilo kojoj od tih veličina. Na web-lokacijama koje su već optimizirane za određene veličine zaslona, ​​možete pogledati CSS kôd koji je za to kriv, što je odličan alat za učenje i za razvojne programere koji odgovaraju dizajnu.

Odgovorni inspektor dodaje kvadratni gumb pored URL trake koji otvara skočni prozor. Ovo proširenje prikazuje sve veličine zaslona za koje je web lokacija koja se trenutačno učitava optimizirana putem traka. Veličina zaslona piše se na kraju svake trake, a ljestvica piksela na vrhu prikazuje različite veličine zaslona. Pomaknite miš preko skale i za svaku se kalibracijsku liniju pojavit će se prozor koji će vam prikazati veličinu zaslona koju predstavlja. Na ovom istom skočnom prozoru nalazi se gumb veličine i gumb za kameru. Klikom na prvi automatski ćete smanjiti veličinu prozora preglednika na toj širini. Zatim možete kliknuti gumb kamere da biste snimili snimku zaslona, ​​ako želite. Snimka zaslona može se spremiti na lokalni pogon ili učitati na Behance.net. Ako osjetite potrebu za ljepšom skalom piksela, kliknite gumb za povećanje da biste je povećali.

instagram viewer

snimka zaslona osjetljivog inspektora

Da biste pregledali CSS koji se koristi za kodiranje opcija pregleda, pokažite mišem preko jedne trake koja predstavlja veličinu zaslona za koju je web mjesto optimizirano, a na kraju ćete vidjeti gumb {}. Kliknite ga da biste vidjeli CSS kôd na novoj kartici. Kôd nije moguće izravno uređivati, ali možete ga kopirati ili upotrijebiti alat za provjeru da biste unijeli promjene. Odgovorni inspektor prilično dobro oponaša responzivni pogled dizajna u Firefoxu; u stvari, ne bi bilo netočno reći da je proširenje rez iznad alata. Tamo gdje vam Firefox nudi unaprijed zadane veličine zaslona, ​​Responsive Inspector vam daje cijelu ljestvicu i puno slobode, a tu je i alat za snimanje zaslona. Unaprijed bi unaprijed učinili responzivnog inspektora mnogo korisnijim i trebalo bi ga dodati. Iako i bez njih, produžetak djeluje izuzetno dobro.

Ugradite responzivnog inspektora iz Chrome web trgovine

watch instagram story