☰

¿Cómo puedo escribir un ancho específico para mi navegador? Estoy usando Chrome y las herramientas de desarrollo de Chrome.

tag-icon • tag-icon google-chrome google-chrome-devtools
¿Cómo puedo escribir un ancho específico para mi navegador? Estoy usando Chrome y las herramientas de desarrollo de Chrome.

Me gustaría escribir un valor de ancho para el tamaño de la pantalla para poder crear puntos de interrupción adecuados. A menudo me encuentro tratando de pasar un píxel a la vez de un tamaño a otro. Esto no siempre funciona en Chrome, ya que a veces paso por dos píxeles a la vez. ¿Hay alguna manera de hacer que el ancho sea un ancho específico escrito?

Estoy usando Mac OS X. Esta pregunta tiene que ver con las herramientas de desarrollo porque pregunto cómo puedo usarlas para configurar el ancho de la ventana del navegador usando el teclado. Si ajusto el ancho entre la pantalla de desarrollo y la página con el mouse, aparecerá un número que indica el ancho y el alto de la ventana. Esto resulta útil cuando se utilizan puntos de interrupción para crear sitios web responsivos. Me gustaría saber cómo hacer esto con mi teclado para no tener que usar el mouse para obtener precisión punto por punto.

Respuesta1

En Chrome Developer Tools, abra la Consola y luego seleccione la pestaña Emulación. Aquí encontrará "Dispositivo" para seleccionar de una lista de dispositivos comunes (como un iPhone; esto también cambiará el agente de usuario enviado al servidor) y encontrará "Pantalla" para configurar las dimensiones manualmente.

Ver tambiénEmulación móvilen la ayuda de Chrome.

Respuesta2

En Chrome hay una extensión llamada "Web Developer Tools". Esa extensión tiene una función donde puedes hacer que el navegador cambie el tamaño a un HxW específico. Incluso puedes configurar tus propios tamaños.

(No estoy seguro si puedo publicar enlaces, así que me abstendré de hacerlo).

Editar:

Gracias Will!

Aquí está el enlace al autor de la extensión:http://chrispederick.com/work/web-developer/

Respuesta3

También hay otra extensión llamada Window Resizer (https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh), que hace lo mismo que el mencionado por @Marcelo. Esto podría resultar útil para cualquiera que tenga una versión anterior de Chrome.

Respuesta4

Enfoque alternativo que no requiere ningún complemento.

  1. Abra las herramientas para desarrolladores de Chrome integradas ( F12o Ctrl + Shift + I)
  2. Seleccione la Consolepestaña
  3. Ingrese lo siguiente para abrir una nueva ventana con la URL actual (el siguiente paso solo funciona en ventanas abiertas explícitamente como redimensionables) 
    let w = window.open(window.location, "dev resize", "resizable");

Luego puede cambiar el tamaño de la ventana recién abierta:

  1. Abra Chrome DevTools en la nueva ventana e ingrese 
    window.resizeTo(window.outerWidth - 1, window.outerHeight);
  2. Regrese a la ventana original e ingrese 
    w.resizeTo(w.outerWidth - 1, w.outerHeight);

Repita el resizeTocomando tantas veces como desee para disminuir el ancho en 1 píxel cada vez.

También funciona en Firefox (y probablemente en Edge, pero no lo probé)

Probado en:

  • Versión cromada111.0.5563.65
  • Versión de Firefox 111.0 (creo que es solo una coincidencia que los números de versión coincidan entre Firefox y Chrome)

información relacionada