PCだとブラウザ上で右クリック＞「検証」を選択することで、手軽に要素の検証を行うことができます。
ですが、スマホ上ではどのブラウザでも同様の機能を使うことができません。じゃあ、どうやってスマホ表示の画面の要素検証をしたらいいんだ？ということで、その手順についてまとめていきます。
スマホ表示の要素を検証したくなった経緯
まず、スマホ表示（モバイル表示）の要素を調べることになった経緯ですが、ブログのSSL化に伴い、混在コンテンツの警告が残ってしまっていたからです。やっかいなことに、PC上では全ての混在コンテンツが解消されているにも関わらず、スマホから同じページを確認すると混在コンテンツになってしまっている状態でした。
要素を検証してエラー原因のアタリをつけようにも、スマホでは検証機能が使えないため調べ方が分からず途方に暮れてしまった…というわけです。
ざっと手順を検索してみてもMacを用いた方法やAndroid限定の方法ばかりが紹介されていてなかなか欲しい情報に辿り着けなかったので、今回備忘録も兼ねて本記事を執筆しています。
つまり
- ブログをiPhoneで表示した時の要素の検証を行いたい
- Windows端末使用
- ブラウザはChromeを使用
というのが今回求めていた条件です。以下、具体的な手順に移ります。
iPhone表示時の要素を検証する手順
まず、検証したいページを開いている状態で右クリック＞「検証」（F12キーでも可）
↑検証画面に切り替わりますので、Consoleタブを選択。PC表示における混在コンテンツのエラーをチェックしたいならここまででOKです。
↑続いて、「なんかスマホの形っぽいアイコン」をクリック。左側の画面がモバイルサイズに切り替わりますが、内容はPC上の表示そのままだと思います。このままだとモバイル表示のエラー内容は確認できません。
↑そこでF5キーなどでページの再読込を行うと、左側の画面がモバイル表示のものに切り替わり、右側のエラー内容もモバイル表示した場合のものになります。これで混在コンテンツのエラー内容を確認することができました。「Mixed Content」と書かれている警告部分が混在コンテンツの原因を特定するためのヒント（というか答え）となっています。
思っていたよりもずっと簡単だったので拍子抜けしてしまいました。
混在コンテンツとなっていた原因
ここからは蛇足になりますが、混在コンテンツのエラー内容を確認した結果、モバイル表示時のみ用いているLineのシェアボタンの画像の参照先がhttpのままになっていたことが原因でした。通りでPC上ではエラーにならないわけです。
単純な作業漏れによるミスだったのですが、何回か見直しても気付けなかったので、やはりエラー内容を直接確認できるというのは便利なものですね。
さいごに
以上、はてなブログのSSL化に伴った話でした。ちなみに、今のところSSL化による目立った順位変動やアクセスの低下などは起きておらず、平常運転です。今回のようになかなか混在コンテンツが解消できずヒヤヒヤする点もありましたが、もっと大きなトラブルが起きるのではないかと身構えていた割には穏便に完了させることができて安心しました。
