Chrome no es muy grande en herramientas de desarrollo, yesa es una de las razones por las que Firefox es el navegador de acceso para la mayoría de los desarrolladores. Sin embargo, para aquellos que usan Chrome, hay muchas extensiones disponibles para ayudarlos a este respecto. Inspector receptivo es una extensión de Chrome que puede competir con razónVista de diseño receptivo que Mozilla introdujo en Firefox 15. Responsive Inspector es una herramienta dos en uno; le muestra los tamaños de pantalla para los que está optimizado un sitio web y rápidamente le permite cambiar a uno diferente de la ventana emergente. Además, puede tomar capturas de pantalla de una página web ajustada a cualquiera de esos tamaños. Para los sitios web que ya están optimizados para ciertos tamaños de pantalla, puede ver el código CSS responsable de eso, por lo que también es una gran herramienta de aprendizaje para desarrolladores de diseño receptivos.
El inspector receptivo agrega un botón cuadrado al lado dela barra de URL que abre una ventana emergente. La extensión muestra todos los tamaños de pantalla para los que el sitio web cargado actualmente está optimizado a través de barras. El tamaño de la pantalla se escribe al final de cada barra, y una escala de píxeles en la parte superior muestra diferentes tamaños de pantalla. Mueva su mouse sobre la escala y para cada línea de calibración, aparecerá una ventana emergente que le mostrará el tamaño de pantalla que representa. En esta misma ventana emergente, hay un botón para cambiar el tamaño y un botón para la cámara. Al hacer clic en el primero, cambiará automáticamente el tamaño de la ventana de su navegador a ese ancho. Luego, puede hacer clic en el botón de la cámara para tomar una captura de pantalla, si lo desea. La captura de pantalla se puede guardar en su disco local o cargarse en Behance.net. Si siente la necesidad de una escala de píxeles más fina, haga clic en el botón de zoom para ampliarla.
Para ver el CSS utilizado para codificar las opciones de visualización,coloque el mouse sobre una de las barras que representan un tamaño de pantalla para el que se ha optimizado el sitio web, y verá que aparece un botón {} al final. Haga clic para ver el código CSS en una nueva pestaña. El código no es directamente editable, pero puede copiarlo o usar la herramienta de inspección para realizar cambios. Responsive Inspector imita bastante bien la Vista de diseño receptivo en Firefox; de hecho, no sería incorrecto decir que la extensión está un corte por encima de la herramienta. Cuando Firefox le ofrece ajustes preestablecidos de tamaño de pantalla, Responsive Inspector le brinda una escala completa y mucha libertad, y luego está la herramienta de captura de pantalla. Sin embargo, los ajustes preestablecidos harán que Responsive Inspector sea mucho más útil y deben agregarse. Aunque incluso sin esos, la extensión funciona excepcionalmente bien.
Instalar Responsive Inspector desde Chrome Web Store
Comentarios