2016年5月27日金曜日

Google Chromeの開発ツールで、スマートフォン向けサイトのソースコードを表示する

このエントリーをはてなブックマークに追加

スマートフォン向けサイトのソースコード、どうやって見ていますか

どうも、お久しぶりです。
最近、全然こちらのブログに書くネタが無くて全くブログを書かない人になっちゃいました。
もっとも、趣味のとあるソシャゲに関しては毎日更新をしているので(文章力が上がるかどうかは別として)、アウトプットはギリギリできている感じです。
ただ、本質的なアウトプットでは無いので、今回はちゃんと意味があるアウトプットが出来るので、個人的には嬉しいです。

閑話休題

さて、最近は、スマートフォン向けサイトをデバッグする事が多いのですが、そのページのソースコードを見るのに四苦八苦していました。
普段は、Google Chromeの開発ツールを立ち上げて、こんな風にしてデバッグしています。

https://gyazo.com/235f6304401245471031f3c5208c08eb

分かりますでしょうか?
この状態で、メニューの「ページのソースを表示」を選ぶと、PCサイト向けのHTMLが表示されます。
巷のテクニックですと、view-source:を使うみたいですが、この手法すら知りませんでした(´・ω・`)
今までどうやっていたかというと、わざわざSafariを立ち上げて、そこでソースコードを表示すると、うまい具合に開発ツールにスマートフォン向けのソースコードが表示されるので、それを使ってほげほげするみたいなやり方をしていました。

リソースタブを使おう

Google Chromeの開発ツールには、リソースタブがあります。

https://gyazo.com/fc2db7b23bfec1d4ce451afe77364d27

これを活用する事で、スマートフォン向けサイトのソースコードを簡単に見ることが出来ます。

https://gyazo.com/52411dbf2b1981224e5070ee8d162a24

こんな感じです。 Framseの直下にあるhtmlを選択すればばっちり見えるという訳ですね。
多分、お手軽さでは、view-source:の方が便利なんだと思いますが、こういう方法もありますよーって事で。

以上です。