Firefox扩展显示当前窗口尺寸？

Question

任何人都可以推荐一个显示当前视口尺寸的Firefox插件吗？理想情况下,在状态栏中并在调整窗口大小时更新"实时" - 对于响应式布局测试非常有用!

我使用过"MeasureIt",但这需要你用尺子绘制,这取决于用户的能力和鼠标分辨率,这很乏味且很可能不准确.

Answer 1

流行的Web开发人员扩展具有"标题中的显示窗口大小"功能(在"调整大小"菜单下),在调整大小时会更新.这将按以下格式显示窗口大小和视口大小:1024x768 [1008x529](窗口大小,视口大小)

Answer 2

我知道这是一个4岁的答案,但我没有看到有人提到你只需要选择切换标尺选项.转到开发人员工具中的设置菜单选项并进行检查.这将显示标尺图标,只需单击它,你就有了标尺.

Answer 3

我已经将这段javascript(需要jQuery)整合在一起,这很容易包含,但是将它作为插件输出到FF状态栏会很好.

从好的方面来说,我认为现在可以在不同的浏览器中使用它!

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

Answer 4

在fire fox中,使用shift + f2打开开发人员工具栏

然后在命令中键入>>标尺.

它会在视图的边缘显示标尺.您必须为每个选项卡/屏幕执行此操作,并在每次刷新后快速访问该功能.

他们应该添加一个选项,使其永久化.

自Firefox 40起可用:https://developer.mozilla.org/en-US/docs/Tools/Rulers

Answer 5

firefox ctrl + shift + m中的响应式设计视图的快捷方式就像我找到的用于此目的的魅力.