iOS SafariのWebインスペクタをMac Safariで表示してデバッグする

ios-safari%e3%81%aeweb%e3%82%a4%e3%83%b3%e3%82%b9%e3%83%98%e3%82%9a%e3%82%af%e3%82%bf%e3%82%92mac-safari%e3%81%a6%e3%82%99%e8%a1%a8%e7%a4%ba%e3%81%97%e3%81%a6%e3%83%86%e3%82%99%e3%83%8f%e3%82%99

いまさらだけどiOSサファリのWebインスペクタが便利だ。。

以前にもちょろっと触れたりしてますが、今iOSアプリを制作しております。
そのアプリ内でウェブ表示をしている箇所があるのですが、そこで使うjavascriptのデバッグが面倒で仕方がなかったのです。

そんな中、iOS SafariのWebインスペクタを思い出して使ってみたところ、とても便利だったのでやり方まとめます。

iOSアプリのデバッグにも使えるWebインスペクタ

やりたかったのは、iOSアプリ内のUIWebViewで呼び出している部分で使っているjavascriptのデバッグ
console.logの確認などをさくさくやりたかったのです。

iOS SafariのWebインスペクタを設定

まずはiOS SafariのWebインスペクタの機能を有効にしないと始まりません。

iOSデバイスのホーム画面から環境設定を開きます。

00ios%e3%83%86%e3%82%99%e3%83%8f%e3%82%99%e3%82%a4%e3%82%b9%e3%81%ae%e3%83%9b%e3%83%bc%e3%83%a0%e7%94%bb%e9%9d%a2%e3%81%8b%e3%82%89%e7%92%b0%e5%a2%83%e8%a8%ad%e5%ae%9a%e3%82%92%e9%96%8b%e3%81%8d

Safariをタップします。

01safari%e3%82%92%e3%82%bf%e3%83%83%e3%83%95%e3%82%9a%e3%81%97%e3%81%be%e3%81%99%e3%80%82

Safari設定内から一番下の詳細をタップします。

02safari%e8%a8%ad%e5%ae%9a%e5%86%85%e3%81%8b%e3%82%89%e4%b8%80%e7%95%aa%e4%b8%8b%e3%81%ae%e8%a9%b3%e7%b4%b0%e3%82%92%e3%82%bf%e3%83%83%e3%83%95%e3%82%9a%e3%81%97%e3%81%be%e3%81%99%e3%80%82

Webインスペクタをオンにします。

03web%e3%82%a4%e3%83%b3%e3%82%b9%e3%83%98%e3%82%9a%e3%82%af%e3%82%bf%e3%82%92%e3%82%aa%e3%83%b3%e3%81%ab%e3%81%97%e3%81%be%e3%81%99%e3%80%82

これでiOS側の設定は完了です。

Mac側のSafariの開発機能を設定

Mac側からSafariを開いて、メニューに「開発」が無い場合は下記を設定します。

Safariメニューから環境設定を開きます。

04safari%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%8b%e3%82%89%e7%92%b0%e5%a2%83%e8%a8%ad%e5%ae%9a%e3%82%92%e9%96%8b%e3%81%8d%e3%81%be%e3%81%99%e3%80%82

詳細タブに移動し、最下部にある「開発メニューを表示」にチェックをいれます。

05%e8%a9%b3%e7%b4%b0%e3%82%bf%e3%83%95%e3%82%99%e3%81%ab%e7%a7%bb%e5%8b%95%e3%81%97%e3%80%81%e6%9c%80%e4%b8%8b%e9%83%a8%e3%81%ab%e3%81%82%e3%82%8b%e3%80%8c%e9%96%8b%e7%99%ba%e3%83%a1%e3%83%8b%e3%83%a5

メニューに「開発」が表示されれば完了です。

06%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ab%e3%80%8c%e9%96%8b%e7%99%ba%e3%80%8d%e3%81%8b%e3%82%99%e8%a1%a8%e7%a4%ba%e3%81%95%e3%82%8c%e3%82%8c%e3%81%af%e3%82%99%e5%ae%8c%e4%ba%86%e3%81%a6%e3%82%99

MacとiOSデバイスをUSBで接続する

上記の設定が完了したら、MacとiOSデバイスをUSBで接続します。
これで設定作業は完了です。

Webインスペクタを利用してデバッグする

Mac側safariのメニューから「開発」をクリックし、目的のiOSデバイスが表示されているか確認しましょう。

この時点でiOSデバイス側で何も操作していないと、上図のように「調査可能なアプリケーションがありません」と表示されます。

07%e7%9b%ae%e7%9a%84%e3%81%aeios%e3%83%86%e3%82%99%e3%83%8f%e3%82%99%e3%82%a4%e3%82%b9%e3%81%8b%e3%82%99%e8%a1%a8%e7%a4%ba%e3%81%95%e3%82%8c%e3%81%a6%e3%81%84%e3%82%8b%e3%81%8b%e7%a2%ba%e8%aa%8d

ここで、iOSのsafariでデバッグしたいウェブサイトや製作中のアプリを起動します。

Mac側safariの「開発」メニューのデバイスからアプリケーションが選択できるようになりました。

08mac%e5%81%b4safari%e3%81%ae%e3%80%8c%e9%96%8b%e7%99%ba%e3%80%8d%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ae%e3%83%86%e3%82%99%e3%83%8f%e3%82%99%e3%82%a4%e3%82%b9%e3%81%8b%e3%82%89%e3%82%a2%e3%83%95

アプリケーションをクリックするとWebインスペクタが起動します。

09%e5%be%8c%e3%81%af%e9%80%9a%e5%b8%b8%e3%82%a6%e3%82%a7%e3%83%95%e3%82%99%e5%88%b6%e4%bd%9c%e3%81%aa%e3%81%a8%e3%82%99%e3%81%a6%e3%82%99%e4%bd%bf%e7%94%a8%e3%81%99%e3%82%8b%e3%81%ae%e3%81%a8%e5%90%8c

後は通常ウェブ制作などで使用するのと同じようにインスペクタが使ってデバッグします。

リソースからはhtmlやcss、javascriptなどがリアルタイムでいじれます。
アプリ内のUIWebViewはデバッグしづらいのでこれは便利です。

cssなんかも簡単にいじれます。

10css%e3%81%aa%e3%82%93%e3%81%8b%e3%82%82%e7%b0%a1%e5%8d%98%e3%81%ab%e3%81%84%e3%81%97%e3%82%99%e3%82%8c%e3%81%be%e3%81%99%e3%80%82

javascriptに書いたconsole.logもこの通り。

11javascript%e3%81%ab%e6%9b%b8%e3%81%84%e3%81%9fconsole-log%e3%82%82%e3%81%93%e3%81%ae%e9%80%9a%e3%82%8a%e3%80%82

本当に助かる。ありがたい。

まとめ

iOS6からの機能なので、もうすでにバンバン使っている方も多いでしょうね。

僕はウェブでは使っていましたが、iOSアプリで使い始めたことでなお重宝するようになりました。

ありがたい!

iOSアプリ関連については下記からご確認ください!

iOSアプリの実機テストがXcode 7で簡単無料に!早速試してみた!

【iOSアプリ】特急審査申請をしたので最新手順まとめます

【完全まとめ】iOSアプリ審査提出から審査通過まで

 

【「TECH::CAMP」なら、全くの未経験からでも最新の開発言語Swiftを用いてiPhoneアプリ開発を学ぶことができます。プロのアプリ開発現場でも活躍できる技術力が短期間で身につくのでおすすめ。オンラインでも学べますよ!】


ゼロからサービスをリリースできるレベルまで到達。

 

筆者について

筆者について


1982年、東京下町生まれ。
高校卒業後、アメリカへ留学。その後、「アートが根付いた国では絵だけで食えるのか」を確認するため、ドイツベルリンにてアート活動をおこなう。

日本に戻ってからは、コーディング・オーサリング・プログラミングなんかを経て、ウェブディレクターを肩書きにしておりました。現在は独立し、ブログやサイトの運用を軸に、ウェブサイトの企画提案からデザイン・構築まで手広く活動しております。何でも屋です。

isLog〜イズログ〜では『日々生きること自体が旅』をモットーに、日々の旅を中心に綴っています。

詳しいプロフィールはこちら


feedly

コメントを残す

*