はじめに
iOSデバイスで動作しない、Javascriptがある。Windows,MacOS,Androidの各デバイス、ブラウザでは動作するのに、iOSデバイスでのみChromeでもSafariでもだめだ。さて、デバッグしたいのだが・・・iPhoneのブラウザでデバッグ情報ってどこに出てくるの？
これが、ことの始まり。対応策としては、掲題の方法があるとのことで試してみた。
セットアップ
セットアップ方法については、先達に従う。説明丸投げ。
https://zatta.link/web/debug-ios-safari-with-windows.html
執筆時点で64bitWindowsのPoweshellでの操作においては、64bit 1.8.8 がインストールされた。
PS C:\Users\microsoftaro> scoop install ios-webkit-debug-proxy
Installing 'ios-webkit-debug-proxy' (1.8.8) [64bit]
...
..
注意点としては、Windowsに npm がセットされていることが前提になっていること。
事前、または途中で nodejs および npm をインストールしませう。なんか、Windows版のnodejsインストール、nodejs本体だけじゃなくて、visualstudio-toolsとかpython3とかchocolatelyも一緒にインストールするみたい。数ギガバイトのディスク容量が必要。
https://qiita.com/taiponrock/items/9001ae194571feb63a5e
iPhone 側の設定
iOS Safari の設定で、いちばん下の詳細メニューの中から、Webインスペクタを有効化する。メニューのなかに「リモートオートメーション」というのがあって気になったりする。
開始
iPhone（iOSデバイス）とWindowsPCをケーブル接続。信頼。Windows側にはiTunesなどは不要。
Windows の PSターミナル で次のコマンドを実行。
remotedebug_ios_webkit_adapter --port=9000
「Windowsセキュリティの重要な警告」とタイトルのついたウィンドウが開き、ファイアウォールのブロック設定をどうするか聞かれるが、ここは自己責任で「アクセスを許可」。編者の環境では、２つのウィンドウが出た。
Chromeのデベロッパーツールの設定でiOSのSafariで開いたページを確認できるようにする
PCのChromeの開発者ツールの設定ページ（chrome://inspect/）へ移動し、Discover network targetsの項目のConfigureをクリック。開始にあたってPSターミナルで打ち込んだコマンドの最後の "--port="のうしろの数字と同じ数字をつかって、設定値を追加する。
localhost:9000
そのあと、そのChrome://inspect/のページはそのまま開いておく。
iPhoneのSafariで閲覧しているページをPCのChromeデベロッパーツールでデバッグする
PCに接続したiPhoneでSafariを起動し、ターゲットのWEBページをブラウジングし・・・なにげにPCの chrome://inspect/ の下部の空白部分をクリックしたりしつつ少し待つと画面にページ名が表示される。その下の、inspect のところをクリックすると・・・
別ウィンドウで、iPhone Safari画面のコピーが表示される。
Safariのコピーだけ、大写し。あくまでコピーであって、PC側からは操作できないみたい。
右側のように、見慣れたChromeのデバッグツールが表示されるのでそこを使う・・・ということだと思う。
まとめ
iOSのSafariでのWebブラウジング動作について、デバッグ情報をWindowsにいくつかのフリーソフトをインストールすれば、Chromeで確認できるということがわかった。
Windows起動、iOSデバイス接続、ios-webkit-debug-proxy起動、Chrome://inspect/ へアクセス、という流れで覚えて使おう。