読者です 読者をやめる 読者になる 読者になる

isLog [イズログ]

isLog〜イズログ〜は『日々生きること自体が旅』をモットーに、僕ishikawaが感じていること・おすすめしたいこと・ウェブなどの技術で共有したほうが良いと思うことについて日々綴っているブログです。

MENU

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

このページは別ブログに移転しました。リダイレクトします。

f:id:islog:20151231005843p:plain

いまさらだが、iPhoneやiPadなんかのiOSサファリのWebインスペクタが便利だ。

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

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

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

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

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

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

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

f:id:islog:20151231005959p:plain

Safariをタップします。

f:id:islog:20151231010008p:plain

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

f:id:islog:20151231010030p:plain

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

f:id:islog:20151231010045p:plain

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

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

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

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

f:id:islog:20151231010054p:plain

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

f:id:islog:20151231010100p:plain

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

f:id:islog:20151231010108p:plain

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

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

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

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

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

f:id:islog:20151231010121p:plain

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

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

f:id:islog:20151231010128p:plain

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

f:id:islog:20151231010138p:plain

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

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

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

f:id:islog:20151231010146p:plain

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

f:id:islog:20151231010154p:plain

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

まとめ

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

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

ありがたい!

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

islog.hatenablog.com

islog.hatenablog.com

islog.hatenablog.com

ほんきで学ぶSwift+iOSアプリ開発入門 Swift2,Xcode7,iOS9対応

ほんきで学ぶSwift+iOSアプリ開発入門 Swift2,Xcode7,iOS9対応

絶対に挫折しない iPhoneアプリ開発「超」入門【Swift & iOS8.1以降 完全対応】

絶対に挫折しない iPhoneアプリ開発「超」入門【Swift & iOS8.1以降 完全対応】