Mobile Layouterでスマホ表示確認

Webデザインもかじらねばなぁということでイマドキなスマホ対応のレスポンシブルデザインの本を読み始めた。これ→これからの「標準」を身につける HTML+CSSデザインレシピ (Web Designing Books)

で、サンプルを弄りながら遊んでるのだけど、CSSちょこっといじる度にWebに公開してスマホでアクセスとかやってられないので、Chromeの拡張ないかなーと思って探してみたのでだけどMobile Layouterというのが良さそうなのでこれを入れた↓
MobileLayouter - Chrome ウェブストア

使い方簡単でインストールするとアドレスバーの横辺りに拡張ボタンができるのでスマホ表示確認したいWebページ表示中にiPhone5sとかNexus4とかデバイスを選ぶだけ。表示中のタブのみ切替でできて縦横切替とかもできる。

使い方のイメージはこのへんのサイト参照↓
スマホと同じ画面幅で表示確認できるChrome拡張 Mobile Layouter が便利すぎる件

一点注意点が本のサンプルとかいじるのにURLがfile://〜のローカルファイルの参照だと反応しなくて、http://localhost:8080〜とかhttpアクセスにしないと認識しない。これでしばらく悩んだ。
ローカルで簡単にhttpサーバ立てるのはpythonあるならSimpleHTTPServer使うのが楽ちんでオススメ。

$ cd (ローカルで公開したいディレクトリ)
$ python -m SimpleHTTPServer 8080