Nov 8, 2013

スマホやタブレットでの表示確認はGoogle Web Developer Toolsで

マルチデバイス対応のサイト制作が標準化しつつある今、スマホやタブレットでの表示や挙動をどうチェックしてますか？

ブラウザの機能拡張も含めさまざまなエミュレータを試しましたが、どれも帯に短し襷に長し。インターフェイスや操作感も直感的とは言えず、新規のデバイスやOSアップデートに対応してくれるのかも疑問。

そこでGoogle大先生が誇るWeb Developer Toolsですよ。

「Google Chrome Deveoper Tools」はこう使う！　基本機能チュートリアル & GDD 2011 セッション概要：CodeZine

Google Chrome Developer Tools（以下、Chrome Dev Tools）とは、Webブラウザ「Google Chrome」に付属している開発ツール。このツールを使用すると、開発者は自身が作成したWebアプリケーションの内部構造に、簡単にアクセスすることができる


Webサイトの裏側を見たり弄ったりするための機能が山ほど詰め込まれたツールですが、目的に応じて一部分だけを使うのももちろんアリ。バグフィックスまで使いこなせなくとも、ただスマホやタブレットでどう表示されるかをPC上で見たいだけって時ありますよね？

Chromeでスマホ表示を見るための手順


  • まずChromeで確認したいサイトを開いて、どこでもいいから右クリック⇒「要素を検証」。


  • Google Web Developer Toolsが開くので（デフォルトは別窓？）、右下隅の設定マークをクリック。


  • 「Overrides」で表示したいデバイスや縦横を選択後、「Enable」と「Emulate touch events」にチェック。すると…


  • 選択したデバイスの画面サイズでブラウザに反映されます。カーソルでタッチアクションも再現。


    • さすがに何もかもスマホのまんまとはいきませんが、僕個人の感想としては使いやすさも再現性も既存のエミュレータより優れてるかなと。ツールそのものに興味はあるけど複雑そうで億劫、という方はこういった解りやすいところから入ってみてはいかがでしょう。

    
    サイト内検索

    • Author

    • Twitter

        Follow @jay0926 ( followers)

      1. Facebook