どうしてもiPhoneで表示しているページをデバッグしたいときの対処法

どうしてもiPhoneで表示しているページをデバッグしたいときの対処法

webサービスを開発しているときに、ステージング環境とかをiPhoneで見ているページをデバッグしたいなとかってときないですか?基本的に開発段階ではChromeで確認&デバッグで事足りるのですが、ステージングに上げて確認したいときとかは実機が一番ですよね。そんなときにiPhoneで表示しているサイトをMacでデバッグする方法をご紹介します。

Ads

1.iPhoneの設定

まずはiPhoneの設定を変えなければいけません。デフォルトのままだと今回のデバッグは出来ないです。

[設定] > [Safari] > [詳細] > [Webインスペクタ]

[Webインスペクタ]をonにしてください。

2.MacとiPhoneをケーブルでつなぐ

次にMacとiPhoneとケーブルでつなぎます。

3.iPhoneのSafariを起動

iPhoneのSfariを起動しておきます。さらに、見たいページを表示しておくといいです。
開発しているサービスなどデバッグしたいページを表示してくださいね。

4.MacのSafariを起動

MacのSafariを起動したらWebインスペクタを次の手順で起動します。
[開発] > [○○のiPhone] > [サイト名(example.com)]

これでWebインスペクタが開かれるはずなので思う存分デバッグしてください。

こんなときに使えるかも

実機で確認時に何かしらの操作をしたいときくらいかなと思っています。正直Chromeでだいたいのことは事足りるので。
とはいえ、どうしても実機でも動作確認したいときに使えますね。

例えば、location.hrefで外部経由の場合の出し分けを実機でも確認したい時にやってみるといいかもです。

consoleで

location.href="http://google.com"

でEnterして

location.href="http://example.com"

で開発しているサービスのURLに表示が変わるので、googleから経由してきたっていうのを装うことができます。

まとめ

いかがでしたか?これでiPhoneで表示されているページに対してもデバッグできますね。
ではでは、良き開発ライフを〜

いいなと思ったらシェアお願いします

Ads

同じカテゴリーの記事

ページの先頭へ