fukasawah.github.io

iOS SafariをWindows上からデバッグする

参考

前提

導入

iOS WebKit Debug Proxyの導入

https://github.com/google/ios-webkit-debug-proxy

バイナリ自体はscoopというWindows向けのパッケージマネージャソフト経由で入れる。

ドキュメントに従い入れる。

起動したらiPhoneをUSBケーブルでつなぎ、Safariで開く。Safariの設定でWebインスペクタが無効担っていると以下のようなメッセージがでる。

PS C:\Users\fukas> ios_webkit_debug_proxy.exe
Listing devices on :9221
ssl recv failed: No error
Unable to connect to デバイス名 (00008030-001D18580E39802E)
  Please verify that Settings > Safari > Advanced > Web Inspector = ON

上記の通り、iPhone側のWebインスペクタが無効なので有効にしてあげる。

上手くいくと以下のようになる。ただ繋がっただけでまだデバッグはできない。

PS C:\Users\fukas> ios_webkit_debug_proxy.exe
Listing devices on :9221
Connected :9222 to デバイス名 (00008030-001D18580E39802E)

ここまで確認したら、ios_webkit_debug_proxyは一旦閉じてよい。

RemoteDebug iOS WebKit Adapterを導入する

https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter

これを入れるとChromeのdev toolsでデバッグができるようになる。要Node.js。

後はremotedebug-ios-webkit-adapterを実行する。こっちは9000番のポートを使い、後でchrome側でこのポートを使うよう設定する必要がある。

なお、内部でios_webkit_debug_proxyを実行しているので順番に起動するとか考える必要はない。remotedebug-ios-webkit-adapterだけ実行すればいい。

デバッグ開始

Chromeを開き、chrome://inspect/#devicesを入力。

DevicesのConfigureを開く。

localhost:9000を追加する。

後はSafari側で操作すると、ChromeのRemote Targetにブラウジング中の一覧が出てくるので、タイトルから対象を見つけてinspectをクリックする。

少々操作感が違うが、これでいつも通りのchrome dev toolsを使ったデバッグができるだろう。

フル機能ではないが、もちろんCSSを修正すると実機も変化するし、JSを実行することも、Breakpointも効く。

デバッグ

事象

まず事象が起きているところ。iPhoneで撮影したもの。

こんな感じでフォントサイズが不規則に大きくなることがあった。変なスタイルが当たっているに違いないと思ったので、デバッガで見てみたいというのがモチベーションだった。

デバッガで見てみる

デバッガでみたところ、やはりなぜかfont-sizeが19pxになっている。

この画像は上記と違うけど同様の事象は起きている
この画像は上記と違うけど同様の事象は起きている

しかし、CSS自体はちゃんと14pxで絶対値で指定しているので、大きくなるはずがない…デバッガではこれ以上よくわからなかった。

解決へ

結局 font-size safari 大きくなる で調べたところ、-webkit-text-size-adjust: 100%を効かせればよいらしい。 こんなの部分的に適用してほしくないので、bodyで指定した。

今回はデバッガを使うまでもなかったけど、今後はsafariのデザインも微調整できそう。デザインセンスないけど。