フリーランスウェブエンジニアがウェブ全般について綴るブログ|いしかわろぐ
PRPR

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

iOS SafariのWebインスペクタをMac Safariで表示してデバッグするiOSアプリ制作
iOSアプリ制作アプリ
本ページはプロモーションが含まれています

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

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

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

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 SafariのWebインスペクタをMac Safariで表示してデバッグする
iOSアプリの実機テストがXcode 7なら簡単無料!手順まとめます
iOSアプリ開発者には朗報でしょう。 iOSアプリの実機テストが『Xcode 7』より簡単且つ無料でできるようになりました。 実機テストをするために必要だった有料の開発者登録が不要になります。 iPhoneでもiPadでも好きな端末でお手製...
iOS SafariのWebインスペクタをMac Safariで表示してデバッグする
iOSアプリ特急審査申請手順まとめ!急ぎのときの最終手段
iOSアプリの特急審査なるものを試してみました。 AppStoreに登録されるまで、通常の審査で10日程かかります。それが特急審査であれば1日程で審査が完了します。急ぎの際の最終手段ですね。 今回はその手順とかかった時間についてまとめます。...
iOS SafariのWebインスペクタをMac Safariで表示してデバッグする
【完全手順】iOSアプリ開発後のAppStore審査申請提出から通過まで
何も知識のない状態ではありましたが、作成したiOSアプリがレビュー審査に通過し、App Storeでダウンロードできるまでこぎつけました。しかしその過程では、申請手順の難解さやリジェクト理由のわかりづらさに大いに戸惑いました。長くはなってし...

 

 

オススメ
アイテム

iOS SafariのWebインスペクタをMac Safariで表示してデバッグする
iOSアプリ開発 達人のレシピ100

コメント

タイトルとURLをコピーしました