Extensión de Firefox para mostrar las dimensiones actuales de la ventana? [cerrado]

¿Puede alguien recomendar un complemento para Firefox que muestre las dimensiones de la ventana actual? Idealmente en la barra de estado y la actualización "en vivo" a medida que cambia el tamaño de la ventana - sería extremadamente útil para las pruebas de diseño de respuesta!

He usado "MeasureIt" pero eso requiere que dibujes con una regla, lo cual es tedioso y posiblemente inexacto dependiendo de la capacidad y resolución del ratón del usuario.

Author: Wladimir Palant, 2013-01-06
Source

6 answers

La popular Extensión para Desarrolladores Web tiene una función "Mostrar el tamaño de la ventana En el título" (en el menú "Redimensionar") que se actualiza al redimensionar. Esto muestra tanto el tamaño de la ventana como el tamaño de la ventana en el siguiente formato: 1024x768 [1008x529] (tamaño de la ventana, tamaño de la ventana)

 21
Author: Bruce van der Kooij,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-12-22 11:38:10

He hackeado esta pieza de javascript (que requiere jQuery) que es bastante fácil de incluir, pero sería bueno tener esto como un complemento para la salida en la barra de estado FF.

En el lado positivo, supongo que ahora se puede usar en diferentes navegadores!

$(document).ready(function(){
    var MEASUREMENTS_ID = 'measurements'; // abstracted-out for convenience in renaming
    $("body").append('<div id="'+MEASUREMENTS_ID+'"></div>');
    $("#"+MEASUREMENTS_ID).css({
        'position': 'fixed',
        'bottom': '0',
        'right': '0',
        'background-color': 'black',
        'color': 'white',
        'padding': '5px',
        'font-size': '10px',
        'opacity': '0.4'
    });
    getDimensions = function(){
        return $(window).width() + ' (' + $(document).width() + ') x ' + $(window).height() + ' (' + $(document).height() + ')';
    }
    $("#"+MEASUREMENTS_ID).text(getDimensions());
    $(window).on("resize", function(){
        $("#"+MEASUREMENTS_ID).text(getDimensions());
    });
});
 16
Author: Coder,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-01-06 18:14:55

En fire fox abra la barra de herramientas del desarrollador con mayús + f2

Luego escriba >> rulers en el comando.

Mostrará reglas en el borde de la vista. Tendrás que hacerlo para cada pestaña/pantalla y después de cada actualización, pero bastante rápido para acceder a la funcionalidad.

Deben agregar una opción para hacerla permanente.

Disponible desde Firefox 40: https://developer.mozilla.org/en-US/docs/Tools/Rulers

 13
Author: Leo F,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-04 05:12:09

Acceso directo para la vista de diseño responsivo en firefox ctrl+shift+m funciona como un encanto para este propósito que encontré.

 11
Author: RP McMurphy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-27 20:38:09

Sé que esta es una respuesta de hace 4 años, pero no veo a nadie mencionar que solo tiene que seleccionar la opción alternar reglas. Vaya a la opción de menú configuración en las herramientas para desarrolladores y compruébelo. Eso abrirá el icono de la regla y simplemente haga clic en él y tendrá su regla. introduzca la descripción de la imagen aquí

 10
Author: Marvel Moe,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-20 01:20:47

Sugiero usar 2 complementos:

  1. La Barra de Complementos - Básicamente trae de vuelta la antigua barra de complementos en la parte inferior de la ventana de Firefox.
  2. Cortafuegos: Muestra el ancho de la ventana en un pequeño cuadro que puede colocar en la Barra de complementos.

He colocado el cuadro de texto FireBreak, dentro de la Barra de complementos, en la parte inferior izquierda, por lo que cuando redimensiona la ventana, todavía puede verla. Si, en su lugar, lo coloca en la parte superior derecha predeterminada, después de la barra de direcciones, se ocultará tan pronto como cambie el tamaño de las ventanas por debajo de un cierto tamaño.

Para obtener un poco más de Firefox cuando se trata de sitios web receptivos, incluso podría utilizar Pestañas de azulejos Un caso de uso útil es tener 3-4 mosaicos abiertos en diferentes tamaños mientras se trabaja en el código para que pueda ver cómo va su diseño y, si utiliza livereload, mostrará todos los cambios en tiempo real.

Aquí hay una captura de pantalla de lo que quiero decir: La misma página web abierta en diferentes azulejos establecidos en diferentes tamaños. Para obtener los tamaños de cada mosaico, necesitará el complemento "Web Deleoper Tools".

introduzca la descripción de la imagen aquí

 2
Author: Antonio Pantano,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-07-11 15:15:46