test resizer plugin google extensions extension developer chrome change google-chrome google-chrome-extension resize responsive-design

google chrome - plugin - Alternativa a Chrome Extension "Window Resizer"



web developer chrome (10)

A la luz de la reciente controversia (diciembre de 2013) sobre la extensión de Chrome titulada "Window Resizer", ¿cuáles son algunas soluciones alternativas para cambiar rápidamente el tamaño del navegador Chrome para realizar pruebas de desarrollo receptivas?



En Windows con AutoHotKey instalado, guarde el siguiente en resize-chrome.ahk y haga doble clic para ejecutar:

WinMove, ahk_exe chrome.exe,, 0, 0, 1024, 768


En realidad, el desarrollador retrocedió y terminó eliminando la pieza ofensiva de código (llamada "Ecolinks") de su extensión. A partir de hoy, se supone que las cosas de los afiliados se han ido.

Fuente: https://productforums.google.com/d/msg/chrome/mlAD1ygc0v0/gKLKWxoGrkIJ

Changelog para la versión 1.9.0.3

Versión 1.9.0.3 (2014-01-15): Debido a la demanda popular, he eliminado EcoLinks.


La prueba de resolución podría ser una alternativa posible.

La prueba de resolución cambia el tamaño de la ventana del navegador para que los desarrolladores puedan obtener una vista previa de sus sitios web en diferentes resoluciones de pantalla. Incluye una lista de resoluciones utilizadas comúnmente y la capacidad de personalizar esa lista. También le da a los usuarios la opción de activar el tamaño del navegador de Google.

Está disponible en la tienda web de Chrome:

https://chrome.google.com/webstore/detail/resolution-test/idhfcdbheobinplaamokffboaccidbal


Otra alternativa (más segura) es hacerte propio.

Google tiene mucha documentation sobre cómo crear extensiones. Hice esta extensión realmente simple que hace todo lo que necesitaba para un proyecto, también puede encontrar el código para esto en github .


Otra solución nativa para probar diseños receptivos es usar las herramientas incorporadas de desarrollo de Chrome. Elija Herramientas-> Herramientas de desarrollador, luego haga clic en el icono de engranaje en la esquina inferior derecha de la ventana que aparece. Haga clic en "Habilitar" y luego haga clic en "Métricas del dispositivo" y puede especificar la resolución que desee replicar.

Además, al cambiar el "Agente de usuario" en esa pantalla, Chrome establece las métricas del dispositivo elegido, lo que puede ser útil a la hora de decidir dónde deben situarse los puntos de interrupción de respuesta para los dispositivos más populares.

Esto no es tan fácil como una extensión de dos clics, pero tiene la ventaja de ser una solución sin extensión y también de usar medidas de pantalla exactas de dispositivos reales.


Para actualizar la respuesta de @ Dave, a partir de Chrome 35.0.1916.153 m, debe seleccionar el ícono Mostrar cajón (> =) a la izquierda del ícono de ajustes, seleccionar Fuentes y luego la pestaña Emulación.

Para obtener las herramientas más actuales, vaya al enlace @FireCodings a las herramientas de desarrollo de emulación móvil de Google y descargue / instale Chrome Canary . Luego, en Canary, seleccione Herramientas-> Herramientas del desarrollador, haga clic en el ícono de dispositivo móvil en la esquina superior izquierda de la ventana de herramientas (en la parte inferior del navegador), haga clic en Fuentes y luego Emulación. La información está allí en el enlace de la página de Google para demostrar cómo usar las herramientas.




¡SÍ!

Recomiendo evitar extensiones, herramientas maestras chrome dev con atajos de teclado .

Ábrelos usando
F12
o
ctrl + shift + i (Gnu / Linux o Windows)
cmd + opt + i (Mac)
o
Menú> Herramientas> Herramientas del desarrollador

EDITAR: Capturas de pantalla actualizadas para reflejar los cambios recientes de las herramientas de desarrollo de Chrome.

¡Un gif lo dice mejor!

(sugerencia: abrir imagen en una nueva pestaña)