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

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

普段何気なく使っているデバッガを使ったデバッグですが、知らない人もいるとのことなので、書いてみました。
#Mobile Safariのデバッグ
##用意するもの
- iPhoneなどiOSデバイス
- Mac
- Safari(Mac版)

## 前準備
### iOSデバイス上でデバッグの許可を出す
<img width="320" alt="ios_preferences.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/215604/776f31b4-bb27-4555-ea7b-6baff0e34421.jpeg">
`設定>Safari>詳細`に行き、`Webインスペクタ`を`On`にする。
### iOSデバイスをMacに接続する
<img width="320" alt="permission.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/215604/6cf2ce49-8713-b931-206f-e7ffbc4fa389.jpeg">
※接続許可を聞かれると思うので、許可しておいてください。
`詳細設定>詳細`を出して`メニューバーに"開発"メニューを表示`にチェックを入れる
![menu_preferences.jpg](https://qiita-image-store.s3.amazonaws.com/0/215604/58837729-d3bf-8e40-3920-d80e91f7253c.jpeg)
`Cmd + ,`でも行ける。
<img width="320" alt="preferences.png" src="https://qiita-image-store.s3.amazonaws.com/0/215604/ba4fa2b1-131b-c2df-9a9b-b4a10ce6d40f.png">
一番下のチェックボックスをチェック。
<img width="320" alt="menu.png" src="https://qiita-image-store.s3.amazonaws.com/0/215604/aa961fc8-663e-1c6a-85b6-2550b7f220da.png">
メニューに開発タブが出てくるはず。
##デバッグ
### iOSデバイスでMobile Safariを立ち上げ、デバッグしたいページを開く
<img width="320" alt="page.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/215604/f0d0e45a-3998-6a3c-1dde-3e775f84a12a.jpeg">
今回はサンプルとして「[Excite電話占い](https://d.excite.co.jp)」のトップを例として使用します。
### MacでSafariを立ち上げ`開発`メニューから接続したiOSデバイスの制御したいウィンドウを選ぶ
<img width="320" alt="inspector.png" src="https://qiita-image-store.s3.amazonaws.com/0/215604/265974dc-9460-6fd6-fce8-9e2302328586.png">
### インスペクタを開いて、適当なDOMを選択してみる
<img width="320" alt="dom_select.png" src="https://qiita-image-store.s3.amazonaws.com/0/215604/599216f6-1d2b-24d5-b7a9-4c6104adbf45.png">
<img width="320" alt="select_from_inspector.png" src="https://qiita-image-store.s3.amazonaws.com/0/215604/9d091135-9525-7705-1049-089f37cd9b8f.png">
すると、実機で青いマスクがかかり、どの要素か確認ができる。
### 試しに消してみる
<img width="320" alt="style.png" src="https://qiita-image-store.s3.amazonaws.com/0/215604/2a235a37-523a-3836-a552-ca8b25d488ac.png">
DOMのスタイルに`display: none;`などを書いて消してみる。
<img width="320" alt="after_hide.png" src="https://qiita-image-store.s3.amazonaws.com/0/215604/08486923-73fc-eae1-8958-b8ece0ed8f85.png">
この通りすぐに消える。
### コンソールからJSをいじる
<img width="320" alt="console.png" src="https://qiita-image-store.s3.amazonaws.com/0/215604/a2f5e6c7-2d3a-29c7-0fa7-dfec8dcd718e.png">
下のコンソールあるいはコンソールタブで適当なJSを書いてみる。
例では`alert('hoge');`を書いている。
※`Enter`で実行できない場合は、`Shift + Enter`。
<img width="320" alt="hoge.png" src="https://qiita-image-store.s3.amazonaws.com/0/215604/81c9a67c-18ef-000a-0092-b68d3efe2f70.png">
すると、実機でAlertが出る。
### ブレークポイントを置いてJSを止める
インスペクタの`デバッガ`から`scrollTop.js`を選んで、25行目辺りで止めてみる。
<img width="320" alt="break_point.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/215604/52f1ab65-f241-f7dd-cf3d-e4f5422f4a47.jpeg">
ある程度スクロールさせてページトップへ移動するボタンを押す。
<img width="320" alt="before_scroll.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/215604/46383fc6-e80a-66bd-7f40-fc8830934371.jpeg">
すると、先程指定したブレークポイントで止まる。
<img width="320" alt="after_break.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/215604/b596661a-2eed-a38e-f208-68fd47f7d445.jpeg">
現在のスクロール量を確認。
<img width="320" alt="current_scroll.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/215604/b394cf6a-57ba-71b0-5a19-f7095315b95e.jpeg">
ここでインスペクタの下部のコンソールから`$(window).scrollTop(100)`と打って、実行。
<img width="320" alt="edit_console.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/215604/8880f273-83bb-a6bf-76ab-d902ab1240b6.jpeg">
すると、実機でスクロール位置が変わる。
<img width="320" alt="force_scroll.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/215604/0d166161-8286-cd6f-fdce-1994ab66a034.jpeg">
結果。
##デバッガメニュー
<img width="320" alt="debugger_menu.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/215604/2b74b423-7e93-8ea0-63ab-db6ec1bae2e0.jpeg">
- 処理継続(次のブレークポイントがあるまで実行。なければそのまま処理終了まで実行)
- ステップ・オーバー(次の行へ移動)
- ステップ・イントゥ(その行で呼び出している関数へ移動)
- ステップ・アウト(その行の処理の呼び出し元に戻るまで処理実行)

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

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

アディオス。