Расширение Firefox для отображения текущих размеров окна?

Кто-нибудь может рекомендовать Firefox-аддон, который показывает размеры текущего видового экрана? Идеально в строке состояния и обновлении "вживую" при изменении размера окна было бы чрезвычайно полезно для гибкого тестирования макета!

Я использовал "MeasureIt", но это требует, чтобы вы рисовали с помощью линейки, которая является утомительной и, вполне возможно, неточной, в зависимости от способности и разрешения мыши пользователя.

Ответ 1

Я взломал этот кусок 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());
    });
});

Ответ 2

В популярном расширении веб-разработчика есть функция "Размер окна дисплея в заголовке" (в меню "Изменение размера" ), которое обновляется при изменении размера. Это отображает как размер окна, так и размер окна просмотра в следующем формате: 1024x768 [1008x529] (размер окна, размер видового экрана)

Ответ 3

Ярлык для отзывчивого дизайна в firefox ctrl + shift + m работает как очарование для этой цели.

Ответ 4

В fire fox откройте панель инструментов разработчика с shift + f2

Затем введите → rulers в команде.

Он отобразит линейки на краю представления. Вам нужно будет сделать это для каждой вкладки/экрана и после каждого обновления, но довольно быстро, чтобы получить доступ к функциям.

Они должны добавить опцию, чтобы сделать ее постоянной.

Доступно с Firefox 40: https://developer.mozilla.org/en-US/docs/Tools/Rulers

Ответ 5

Я знаю, что это 4-летний ответ, но я не вижу, чтобы кто-то упоминал, что вам просто нужно выбрать опцию тумблеров. Перейдите в меню настроек в инструментах разработчика и проверьте его. Это приведет к появлению значка правителя и просто щелкните по нему, и у вас будет ваш правитель.

Ответ 6

Я предлагаю использовать 2 дополнения:

Аддон-бар. Он в основном возвращает старый аддон в нижней части окна firefox.
FireBreak: он отображает ширину окна просмотра в маленьком поле, которое вы можете разместить в Аддоновой панели.

Я разместил текстовое поле FireBreak внутри Аддон-панели в левом нижнем углу, поэтому, когда вы изменяете размер окна, вы все еще можете его увидеть. Если вы вместо этого поместите его по умолчанию в верхнем правом углу, после адресной строки, он будет скрыт, как только вы измените размер окон ниже определенного размера.

Чтобы получить немного больше от firefox при работе с отзывчивыми веб-сайтами, вы можете даже использовать вкладки Tile Полезным случаем использования является то, что при работе над кодом в 3-4 раза открываются 3-4 плитки разных размеров, чтобы вы могли видеть, как будет выглядеть ваш макет, и если вы будете использовать функцию загрузки, он покажет все изменения в режиме реального времени.

Вот скриншот, что я имею в виду: та же самая веб-страница открыта в разных плитах, установленных на разные размеры. Чтобы получить размеры каждой плитки, вам понадобится "Add Deeroper Tools".