Chrome nu este foarte important în ceea ce privește instrumentele pentru dezvoltatori șiacesta este unul dintre motivele pentru care Firefox este browserul accesibil pentru majoritatea dezvoltatorilor. Cu toate acestea, pentru cei care folosesc Chrome, există numeroase extensii disponibile pentru a le ajuta în acest sens. Inspector responsabil este o extensie Chrome care poate rivaliza corectResponsive Design Vizualizați că Mozilla a introdus în Firefox 15. Responsive Inspector este un instrument dual-in-one; vă arată dimensiunile ecranului pentru care este optimizat un site web și vă permite să treceți rapid la unul diferit de cel pop-up. Mai mult, poate face capturi de ecran ale unei pagini web ajustate la oricare dintre aceste dimensiuni. Pentru site-urile web care sunt deja optimizate pentru anumite dimensiuni ale ecranului, puteți vedea codul CSS responsabil pentru asta, ceea ce îl face un instrument excelent de învățare și pentru dezvoltatorii responsabili de design.
Inspectorul responsabil adaugă un buton pătrat lângăbara URL care deschide un pop-up. Extensia vă arată toate dimensiunile ecranului pentru care site-ul web încărcat este optimizat pentru bare. Mărimea ecranului este scrisă la sfârșitul fiecărei bare, iar o scară de pixeli din partea de sus vă arată dimensiuni de ecran diferite. Mutați mouse-ul peste scară și pentru fiecare linie de calibrare, va apărea un pop care vă va arăta dimensiunea ecranului pe care îl reprezintă. Pe același pop-up, există un buton de redimensionare, precum și un buton de cameră. Dacă faceți clic pe prima, veți redimensiona automat fereastra browserului dvs. la acea lățime. Puteți apoi faceți clic pe butonul camerei pentru a face o captură de ecran, dacă doriți. Imaginea de ecran poate fi salvată pe unitatea dvs. locală sau încărcată pe Behance.net. Dacă simțiți nevoia unei scări de pixeli mai fine, faceți clic pe butonul zoom in pentru a-l mări.
Pentru a vizualiza CSS folosit pentru a codifica opțiunile de vizualizare,treceți cu mouse-ul peste una dintre barele care reprezintă o dimensiune a ecranului pentru care site-ul web a fost optimizat și veți vedea că la sfârșit apare un buton {}. Faceți clic pe el pentru a vizualiza codul CSS într-o nouă filă. Codul nu poate fi modificat direct, dar îl puteți copia sau utiliza instrumentul inspect pentru a face modificări. Responsive Inspector imită destul de bine View Responsive Design în Firefox; de fapt, nu ar fi incorect să se spună că extensia este o reducere deasupra instrumentului. În cazul în care Firefox vă oferă presetări pentru dimensiunea ecranului, Responsive Inspector vă oferă o întreagă scară și multă libertate, iar apoi există instrumentul de captură de ecran. Presetările ar face ca inspectorul responsiv să fie mult mai util și ar trebui adăugate. Deși chiar și fără acestea, extensia funcționează excepțional de bine.
Instalați Responsive Inspector din Chrome Web Store
Comentarii