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

Question

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

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

Answer 1

热门Web Developer Extension有一个“标题显示窗口大小”功能（在“调整大小”菜单下），在调整大小时会更新。这将按以下格式显示窗口大小和视口大小：1024x768 [1008x529]（窗口大小，视口大小）

Answer 2

我已经将这段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 3

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

Answer 4

在fire fox中使用 shift + f2

打开开发人员工具栏

然后输入＆gt;＆gt;命令中的标尺。

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

他们应该添加一个选项以使其永久化。

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

Answer 5

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

Answer 6

我建议使用2个插件：

1. The Addon Bar - 它基本上会带回firefox窗口底部的旧插件栏。
2. FireBreak ：它会在您可以放入插件栏的小方框中显示窗口视口宽度。

我已将FireBreak文本框放在插件栏的左下方，因此当您调整窗口大小时，您仍然可以看到它。相反，如果你把它放在默认的右上角，在地址栏之后，只要你将窗口调整到一定大小以下就会隐藏它。

要在处理自适应网站时从Firefox获得更多信息，您甚至可以使用 Tile Tabs 一个有用的用例是在处理代码时打开3-4个不同大小的图块，这样您就可以看到布局的进展情况，如果使用livereload，它将实时显示所有更改。

以下是我的意思截图：同一个网页在不同的图块中打开，设置为不同的尺寸。 要获得每个磁贴的大小，您需要使用“Web Deleoper Tools”插件。