ウィンドウのサイズを確認しながらデバッグする方法

2014/11/21 2015/01/26

レスポンシブのWebサイトを作成するときウィンドウ幅を見ながら画面表示をみたいので、こんなことをしていた。

<script>

    $(function(){

        $(window).resize(function() {

            console.log($(window).width());

        });

    });

</script>

ウィンドウ幅が変わるたびにconsole.logでブラウザの開発ツール上で表示させていた。

ブラウザの機能で確認できる

上記のようなことしなくてもよかった。

ブラウザ（ForeFox）の開発ツールを起動し、下記に示すところに「レスポンシブデザインモード」というものがあった。

「レスポンシブデザインモード」をクリックすると、

表示が切り替わり、ウィンドウサイズを自由に変更でき、サイズも確認することができました。

ずっと知らなかった・・・・

今回はFireFoxですがおそらくChromeでもあるでしょう。

ブラウザ標準搭載の開発ツールにはいろいろ機能があるけど全然使いこなせてない気がする・・・

: Adobe Bridgeで画像ファイルの名前を一括変換する方法

デジカメの画像データなどファイル名を管理する時、「好きな名前」＋「通し番号」を付 …

: マイクスピーカーAbaya B109が矢印表示がでて動かなくなったけど解決

リモート会議するときに使用してたマイクスピーカーのAvaya B109が突然動か …

: page plugin（facebook埋め込み）をレスポンシブ対応する

2015年6月にfacebookをwebサイトに埋め込むには「like box」 …