Way in Firefox to show current window dimensions?

I've hacked together this piece of javascript (requiring jQuery) which is easy enough to include, but it would be nice to have this as an addon to output into the FF status bar.

On the plus side I suppose this can now be used in different browsers!

$(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());
    });
});

The popular Web Developer Extension has a "Display Window Size In Title" function (under the "Resize" menu) which updates when resizing. This displays both the window size and the viewport size in the following format: 1024x768 [1008x529] (window size, viewport size)


I know this is a 4 year old answer, but I don't see anyone mention that you just have to select the toggle rulers option. Go to the settings menu option in the developer tools and check it. That will bring up the ruler icon and just click it and you have your ruler. enter image description here

Tags:

Firefox