Chrome er ikke meget stort på udviklerværktøjer, ogdet er en af grundene til, at Firefox er go-to-browseren for de fleste udviklere. For dem, der bruger Chrome, er der imidlertid mange udvidelser til rådighed for at hjælpe dem i denne forbindelse. Responsiv inspektør er en Chrome-udvidelse, der med rette kan konkurrere medResponsivt design Vis, at Mozilla introducerede i Firefox 15. Responsive Inspector er et to-i-et værktøj; det viser dig, hvilken skærmstørrelse et websted er optimeret til, og giver dig hurtigt mulighed for at skifte til en anden fra pop-up-en. Desuden kan det tage skærmbilleder af en webside, der er tilpasset en hvilken som helst af disse størrelser. På websteder, der allerede er optimeret til bestemte skærmstørrelser, kan du se den CSS-kode, der er ansvarlig for det, hvilket gør det til et godt læringsværktøj for lydhøre designudviklere.
Responsiv inspektør tilføjer en firkantet knap ved siden afURL-linjen, der åbner en pop-up. Udvidelsen viser dig alle skærmstørrelser, som det aktuelt indlæste websted er optimeret til via søjler. Skærmstørrelsen skrives i slutningen af hver bjælke, og en pixelskala øverst viser dig forskellige skærmstørrelser. Flyt musen over skalaen, og for hver kalibreringslinje vises en pop, der viser dig den skærmstørrelse, den repræsenterer. På denne samme pop-up findes der en størrelse på størrelse samt en kameraknap. Ved at klikke på førstnævnte ændres størrelsen på dit browservindue automatisk til denne bredde. Du kan derefter klikke på kameraknappen for at tage et skærmbillede af det, hvis du vil. Screenshotet kan gemmes på dit lokale drev eller uploades til Behance.net. Hvis du føler behov for en finere pixelskala, skal du klikke på zoom ind-knappen for at forstørre den.
Hvis du vil se det CSS, der bruges til at kode visningsindstillingerne,hold musen hen over en af bjælkerne, der repræsenterer en skærmstørrelse, som webstedet er optimeret til, og du vil se en {} knap vises ved udgangen. Klik på den for at se CSS-koden i en ny fane. Koden er ikke direkte redigerbar, men du kan kopiere den eller bruge inspektionsværktøjet til at foretage ændringer. Responsiv inspektør efterligner relativt godt den responsive designvisning i Firefox; faktisk ville det ikke være forkert at sige, at udvidelsen er et snit over værktøjet. Hvor Firefox giver dig forudindstillinger af skærmstørrelse, giver Responsive Inspector dig en hel skala og masser af frihed, og så er der skærmbilledeværktøjet. Forudindstillinger ville gøre Responsive Inspector dog meget mere nyttige og bør tilføjes. Selv selv uden disse fungerer forlængelsen usædvanligt godt.
Installer Responsive Inspector fra Chrome Web Store
Kommentarer