web-dev-qa-db-fra.com

Extension Firefox pour afficher les dimensions actuelles de la fenêtre?

Quelqu'un peut-il recommander un module complémentaire Firefox qui montre les dimensions de la fenêtre actuelle? Idéalement dans la barre d'état et la mise à jour "en direct" lorsque vous redimensionnez la fenêtre - serait extrêmement utile pour des tests de mise en page réactifs!

J'ai utilisé "MeasureIt" mais cela vous oblige à dessiner avec une règle, ce qui est fastidieux et très probablement inexact en fonction de la capacité et de la résolution de la souris de l'utilisateur.

firefoxfirefox-addon
28
Coder

J'ai piraté ensemble ce morceau de javascript (nécessitant jQuery) qui est assez facile à inclure, mais ce serait bien de l'avoir comme un addon à afficher dans la barre d'état FF.

Sur le plan positif, je suppose que cela peut maintenant être utilisé dans différents navigateurs!

$(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
Coder

Le populaire Web Developer Extension a une fonction "Afficher la taille de la fenêtre dans le titre" (sous le menu "Redimensionner") qui se met à jour lors du redimensionnement. Cela affiche à la fois la taille de la fenêtre et la taille de la fenêtre au format suivant: 1024x768 [1008x529] (taille de la fenêtre, taille de la fenêtre)

21
Bruce van der Kooij

Je sais que c'est une réponse vieille de 4 ans, mais je ne vois personne mentionner que vous n'avez qu'à sélectionner l'option de bascule des règles. Accédez à l'option de menu des paramètres dans les outils de développement et cochez-la. Cela fera apparaître l'icône de la règle et cliquez simplement dessus et vous avez votre règle. enter image description here

16
Marvel Moe

Dans Fire Fox, ouvrez la barre d'outils du développeur avec shift + f2

Tapez ensuite >> règles dans la commande.

Il affichera les règles sur le bord de la vue. Vous devrez le faire pour chaque onglet/écran et après chaque rafraîchissement mais assez rapidement pour accéder à la fonctionnalité.

Ils devraient ajouter une option pour la rendre permanente.

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

12
Leo Fisher

Le raccourci pour une vue de conception réactive dans firefox ctrl + shift + m fonctionne comme un charme à cet effet, j'ai trouvé.

11
RP McMurphy

Je suggère d'utiliser 2 addons:

  1. La barre des compléments - Elle ramène essentiellement l'ancienne barre des compléments au bas de la fenêtre de Firefox.
  2. FireBreak: Il montre la largeur de la fenêtre d'affichage dans une petite boîte que vous pouvez placer dans la barre des modules complémentaires.

J'ai placé la zone de texte FireBreak, à l'intérieur de la barre des compléments, en bas à gauche, donc lorsque vous redimensionnez la fenêtre, vous pouvez toujours la voir. Si vous le placez en haut à droite par défaut, après la barre d'adresse, il sera masqué dès que vous redimensionnerez les fenêtres en dessous d'une certaine taille.

Pour obtenir un peu plus de Firefox lorsque vous traitez des sites Web réactifs, vous pouvez même utiliser Onglets de mosaïque Un cas d'utilisation utile consiste à ayez 3-4 tuiles ouvertes à différentes tailles tout en travaillant sur le code afin que vous puissiez voir comment votre mise en page se déroule et, si vous utilisez livereload, il montrera toutes les modifications en temps réel.

Voici une capture d'écran de ce que je veux dire: la même page Web ouverte dans différentes tuiles définies à différentes tailles. Pour obtenir les tailles de chaque tuile, vous aurez besoin de l'addon "Web Deleoper Tools".

enter image description here

2
Antonio Pantano