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

2014/11/21 2015/01/26

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

<script>

    $(function(){

        $(window).resize(function() {

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

        });

    });

</script>

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

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

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

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

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

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

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

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

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

: サイトにFacebookページを埋め込む方法–LikeBoxは廃止。Page Pluginになります–

以前LikeBoxを使った以下の記事を書いたのですが2015/6/23日をもって …

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

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

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

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

: ネットショップBASE（ベイス）のAPIを使って商品一覧を表示させてみた

簡単に無料でネットショップが開設できるサービス「BASE」。無料ってのがとても魅 …