Safari
debug
Web
MobileSafari

実機のMobile Safariのページデバッグについて

みなさん、こんにちは。
エキサイトで窓際エンジニアをやっている坂田です。
(そして夕方の西日が眩しい!)

普段何気なく使っているデバッガを使ったデバッグですが、知らない人もいるとのことなので、書いてみました。

Mobile Safariのデバッグ

用意するもの

  • iPhoneなどiOSデバイス
  • Mac
  • Safari(Mac版)

前準備

iOSデバイス上でデバッグの許可を出す

ios_preferences.jpg
設定>Safari>詳細に行き、WebインスペクタOnにする。

iOSデバイスをMacに接続する

permission.jpg
※接続許可を聞かれると思うので、許可しておいてください。
詳細設定>詳細を出してメニューバーに"開発"メニューを表示にチェックを入れる
menu_preferences.jpg
Cmd + ,でも行ける。
preferences.png
一番下のチェックボックスをチェック。
menu.png
メニューに開発タブが出てくるはず。

デバッグ

iOSデバイスでMobile Safariを立ち上げ、デバッグしたいページを開く

page.jpg
今回はサンプルとして「Excite電話占い」のトップを例として使用します。

MacでSafariを立ち上げ開発メニューから接続したiOSデバイスの制御したいウィンドウを選ぶ

inspector.png

インスペクタを開いて、適当なDOMを選択してみる

dom_select.png
select_from_inspector.png
すると、実機で青いマスクがかかり、どの要素か確認ができる。

試しに消してみる

style.png
DOMのスタイルにdisplay: none;などを書いて消してみる。
after_hide.png
この通りすぐに消える。

コンソールからJSをいじる

console.png
下のコンソールあるいはコンソールタブで適当なJSを書いてみる。
例ではalert('hoge');を書いている。
Enterで実行できない場合は、Shift + Enter
hoge.png
すると、実機でAlertが出る。

ブレークポイントを置いてJSを止める

インスペクタのデバッガからscrollTop.jsを選んで、25行目辺りで止めてみる。
break_point.jpg
ある程度スクロールさせてページトップへ移動するボタンを押す。
before_scroll.jpg
すると、先程指定したブレークポイントで止まる。
after_break.jpg
現在のスクロール量を確認。
current_scroll.jpg
ここでインスペクタの下部のコンソールから$(window).scrollTop(100)と打って、実行。
edit_console.jpg
すると、実機でスクロール位置が変わる。
force_scroll.jpg
結果。

デバッガメニュー

debugger_menu.jpg
- 処理継続(次のブレークポイントがあるまで実行。なければそのまま処理終了まで実行)
- ステップ・オーバー(次の行へ移動)
- ステップ・イントゥ(その行で呼び出している関数へ移動)
- ステップ・アウト(その行の処理の呼び出し元に戻るまで処理実行)

おわりに

とまぁ、ざっくりSafariのデバッガによるJSのデバッグ方法について簡単に書きました。
多少補足しておくと、よくあるIDEでのデバッグ同様、ブレークポイント中はそのスコープも維持されるので、その中でしか存在しない変数の確認や代入なども可能です。
わざと予期せぬ状態を作って動作を検証してみるのも良いでしょう。
なお、Macでやると激重ですが、AndroidのChromeでも同様のリモートデバッグが出来ます。
Windowsユーザの方はやってみるのも良いかもしれません。

本当はPHPStormとXdebugによるローカルデバッグなども書きたかったのですが、ちょっと書ききれそうにないので今回はこのへんまで、ということで。
気が向いたら書きます。

アディオス。