web-dev-qa-db-ja.com

現在のウィンドウサイズを表示するFirefox拡張機能

誰でも現在のビューポートの寸法を表示するFirefoxアドオンを推奨できますか？理想的には、ステータスバーでウィンドウのサイズを変更するときに「ライブ」を更新します。これは、レスポンシブレイアウトテストに非常に役立ちます。

「MeasureIt」を使用しましたが、それはルーラーで描画する必要があります。これは退屈で、ユーザーの能力とマウスの解像度によっては非常に不正確かもしれません。

firefoxfirefox-addon
28
Coder

この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());
    });
});
16
Coder

人気のある Web Developer Extension には、「ウィンドウサイズをタイトルに表示」機能（「サイズ変更」メニューの下）があり、サイズ変更時に更新されます。これにより、ウィンドウサイズとビューポートサイズの両方が次の形式で表示されます。1024x768[1008x529]（ウィンドウサイズ、ビューポートサイズ）

21
Bruce van der Kooij

これは4年前の回答であることは知っていますが、トグルルーラーオプションを選択するだけでよいと言う人は誰もいません。開発者ツールの設定メニューオプションに移動して確認します。ルーラーアイコンが表示され、クリックするだけでルーラーが手に入ります。 enter image description here

16
Marvel Moe

Fire foxでshift + f2で開発者ツールバーを開きます

次に、コマンドに>> rulersと入力します。

ビューのエッジにルーラーが表示されます。各タブ/画面に対して、および各リフレッシュ後にそれを行う必要がありますが、機能にアクセスするにはかなり高速です。

永続化するオプションを追加する必要があります。

Firefox 40以降で利用可能： https://developer.mozilla.org/en-US/docs/Tools/Rulers

12
Leo Fisher

Firefox ctrl + shift + mのレスポンシブデザインビューのショートカットは、私が見つけたこの目的の魅力のように機能します。

11
RP McMurphy

2つのアドオンを使用することをお勧めします。

  1. アドオンバー-基本的に、Firefoxウィンドウの下部にある古いアドオンバーを表示します。
  2. FireBreak：アドオンバーに配置できる小さなボックスにウィンドウビューポートの幅が表示されます。

アドオンバー内の左下にFireBreakテキストボックスを配置しました。そのため、ウィンドウのサイズを変更しても、それを見ることができます。代わりに、アドレスバーの後のデフォルトの右上に配置すると、ウィンドウのサイズを特定のサイズ以下に変更するとすぐに非表示になります。

レスポンシブWebサイトを扱うときにFirefoxからもう少し取得するには、Tile Tabs （を使用することもできますコードの作業中に3〜4個のタイルをさまざまなサイズで開いて、レイアウトの進行状況を確認できます。livereloadを使用すると、すべての変更がリアルタイムで表示されます。

ここに私が意味するもののスクリーンショットがあります：同じウェブページが異なるサイズに設定された異なるタイルで開きます。各タイルのサイズを取得するには、「Web Deleoper Tools」アドオンが必要です。

enter image description here

2
Antonio Pantano