iPhone-safariのwebインスペクタをmac-safariで表示できない場合の解消方法

WEBアプリケーションを開発していると、どうしても避けて通れないのが、スマートフォンとPCというマルチデバイス対応と、様々あるブラウザのクロスプラットフォーム対応。 サイズ毎に確認しなければいけないし、コーディングエラーが出た場合の対処法など深みにハマる場合も少なく有りません。 そんな中、今では当たり前のように常備されているブラウザのデバッグコンソールは非常にありがたく、jsコードのどのファイルの何行目でエラーが発生したかを随時表示してくれて、WEB開発の最強のデバッガーであると言ってもいいでしょう。 しかし、スマートフォン開発の場合、スマホのブラウザにはコンソールが見れないため、alert関数を入れ込んで少しずつ確認する事もしばしばあります。 Androidは、開発IDEにデバッガなどがついている為、PCとケーブルでつないでPCブラウザと同じようにコンソール画面を確認することが可能なのですが、iOSももちろんsafariに同じ機能が備わっています。

webインスペクタが表示されない不具合？！

会社などでWEBサービス開発を行っている人であれば、職場にある開発機のiphoneが自分のPCに接続されっぱなしで、常にwebインスペクタを表示している事もあるかと思いますが、通常の場合、その場でライトニングケーブルで接続して少しめんどくさい感じです。 おまけに、最近のmacのノートブックはURB-type-cしかジャックがないにも関わらず、iphoneに付属しているケーブルは通常のUSBケーブルだけという、行き届いていない環境。 ハードルは既にここから高くなっているのですが、久しぶりの開発作業で、スマートフォン対応が必要だったので、インスペクタを表示しようと思って、ケーブルを繋いでmacのsafariを立ち上げてみたのですが、iphoneがさっぱり認識しません・・・ ちゃんと、iphoneのsafari設定で「webインスペクタ」はONになっているにも関わらず、全く反応しません・・・

確認の旅はじまる

色々とmac側のアップデートをしなければいけないのかと思うのだが、OSのアップグレードをこのタイミングでするわけにはいかず、試しに手元にあった別のiphone(古い端末)に繋いでみると、なんと接続できるではありませんか・・・ この時点で、不具合の発生しているiphoneが限られているので、iphone事態の設定であることがわかります。 とりあえず、まずやるべきは、端末の再起動でしょ！ ということで、iphoneを再起動して接続してみます・・・ 駄目です・・・ 1度じゃ駄目なら2度3度・・・ 駄目です・・・ lightningケーブルを抜き差ししても・・・ 念を押して、macPCも再起動・・・ 駄目です・・・ 時間がかかりそうなので、WEBで検索してみる・・・ 「iphone safari　コンソール表示」 「webインスペクタ　接続できない　なんで？」 この辺のキーワードで出てくるサイトは大体同じ感じで、apple社のページもあれば、サードパーティでWEBアプリ提供会社のサポートページもあります。 残念ながらどのページもほぼ同じことが書かれてありましたが、初期設定の部分のみで、解決できませんでした。 ちなみに、書かれている内容は、

1. mac-safariの「開発タブ」の表示方法 2. iphone-safariの設定「webインスペクタ」をONにする設定方法

これ以外のごちゃごちゃした情報はほぼ意味がないので割愛しますが基本的にこの2点ができていたら、インスペクタ接続はできるはず・・・なのに・・・

突如解決

実はiphoneを再起動した時に一瞬だけwebインスペクタリストに表示される事があり、safari接続まではできないので、この挙動が不思議だったのですが、 通常接続できない場合は、macとiphoneがまったくアクセスできない状態になるはずなのですが、どうやらitunesで同期はできるようです。 この時点でmacOSはiphoneを認識は出来ていて「信頼」確認は完了している状態ということも分かった。 そして、今回の事象の解決方法ですが、

itunesのwifi接続をするを解除する

これだけで、アッサリと、webインスペクタアクセスできるようになりました。 なんじゃこりゃ！！！！！ 便利だと思って使っていたwifiアクセスで、itunesから音楽CDをiphoneに入れる時に使っていたのに、これからはケーブル接続しなければいけないとは、なんともめんどくさい・・・ あくせくしている時に、一瞬だけ接続できていたのは、wifi接続がされていない状態だったためなんですね。 であれば、wifi接続機能はONにしておいて、webインスペクタ使うときだけiphoneのwifiをoffにすればいいのでは・・・ webブラウザの確認をしなければ行けない上、開発場所のLAN環境を使わないといけないので、そもそも無理な事・・・ 大人しくケーブル接続することを心に誓った下駄でした・・・orz