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

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

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

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

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

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

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

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

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

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

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

Safariをタップします。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

ありがたい!

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

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

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

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

 

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

iOS SafariのWebインスペクタをMac Safariで表示してデバッグする
ゼロからサービスをリリースできるレベルまで到達。iOS SafariのWebインスペクタをMac Safariで表示してデバッグする

 

カテゴリ別記事一覧(全カテゴリ一覧
iOSアプリ制作 アプリ

筆者について

筆者について


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

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

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

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


feedly

コメントを残す

*