スマホで表示されているサイトのソースを見たい時に・・・
人に読んでもらえるサイトを構築しようと思ったら、パソコンだけではなく、スマホではどう表示されるのかといったところをよく意識して作成することが必要です。
ですが、ココで悩みが・・・パソコンでHTMLソースを見るのは簡単ですが、スマートフォンではどうやって見ればイイんだろうと？
私がこの悩みにブチ当たった時に、google chromeの拡張機能を利用しました。その時にやった事を紹介しますね。
google chromeのダウンロード
PCでスマホサイトのソースを表示させる方法は色々ありますが、私はgoogle chromeの拡張機能【User Agent Switcher】を利用しています。
ナゼかって？私は元からgoogle chromeユーザーだったので、一番簡単だったからです。
今現在google chromeをインストールされていない方は以下からダウンロードできます。
User Agent Switcherのダウンロード＆インストール
Ultimate User Agent Switcherは、簡単にいうと、端末・ブラウザでのHPの表示をPC上からエミュレート出来る機能です。
以下のURLからダウンロードすることが出来ます。このページへのアクセスは、google chromeで行ってください。
ページを開くと、上のような画面が表示されます。右上の赤い丸で囲まれている
＋CHROMEに追加ボタンを押してください。
上の図のようにUser Agent Switcherを追加するか聞いてきますので、
拡張機能を追加ボタンをクリックしてください。
上図のメッセージが表示されれば、User Agent Switcherのインストールは完了です。
User Agent Switcherの設定
インストールが終了したら、設定を行います。
ブラウザの右上隅に上図のようなアイコンが表示されます。このアイコンを押すと設定メニューが表示されます。
一番上の今すぐ有効にするにチェックを入れます。次に現在のタブのみに適用されますにチェックを入れます。
これで下準備は整いました。後は、どのブラウザ・画面で見たいかを選択してください。この例では、iphone4にしています。
HTMLソースを表示させるには、マウスを右クリックしてページのソースを表示を選択しても良いですし、F12キーで要素を検証してもOKです！
