Chrome är inte så stort på utvecklarverktyg ochdet är ett av orsakerna till att Firefox är webbläsaren som går till de flesta utvecklare. Men för dem som använder Chrome finns det många tillägg som kan hjälpa dem i detta avseende. Responsiv inspektör är ett Chrome-förlängning som med rätta kan konkurrera medResponsive Design Visa som Mozilla introducerade i Firefox 15. Responsive Inspector är ett två i ett verktyg; det visar dig skärmstorlekar som en webbplats är optimerad för och gör att du snabbt kan växla till en annan än popup-fönstret. Dessutom kan det ta skärmdumpar av en webbsida anpassad till någon av dessa storlekar. För webbplatser som redan är optimerade för vissa skärmstorlekar kan du se CSS-koden som är ansvarig för det, vilket gör det till ett utmärkt inlärningsverktyg för responsiva designutvecklare också.
Responsive Inspector lägger till en fyrkantig knapp bredvidURL-fältet som öppnar ett popup-fönster. Tillägget visar alla skärmstorlekar som den nu laddade webbplatsen är optimerad för via fält. Skärmstorleken skrivs i slutet av varje stapel, och en pixelskala längst upp visar olika skärmstorlekar. Flytta musen över skalan och för varje kalibreringslinje visas en pop som visar dig skärmstorlek den representerar. På samma popup-fönster finns det en storlek på knappen samt en kameraknapp. Om du klickar på den förstnämnda ändras storleken på webbläsarfönstret automatiskt till den bredden. Du kan sedan klicka på kameraknappen om du vill ta en skärmdump av den. Skärmdumpen kan sparas på din lokala enhet eller laddas upp till Behance.net. Om du känner behov av en finare bildskala, klicka på zoom in-knappen för att förstora den.
För att visa CSS som används för att koda visningsalternativen,håll musen över en av staplarna som representerar en skärmstorlek som webbplatsen har optimerats för, och du kommer att se en {} knapp visas i slutet. Klicka på den för att se CSS-koden i en ny flik. Koden är inte direkt redigerbar, men du kan kopiera den eller använda inspektionsverktyget för att göra ändringar. Responsive Inspector efterliknar den Responsive Design View i Firefox ganska bra; i själva verket skulle det inte vara felaktigt att säga att tillägget är ett snitt ovanför verktyget. Där Firefox ger dig förinställningar av skärmstorlek, ger Responsive Inspector dig en hel skala och mycket frihet, och sedan finns skärmdumpverktyget. Förinställningar skulle dock göra Responsive Inspector mycket mer användbar och bör läggas till. Även om de inte är sådana fungerar tillägget exceptionellt bra.
Installera Responsive Inspector från Chrome Web Store
kommentarer