iPhoneやiPadで、Safariのコンソールログがみたい。PCではJavascriptのエラーは出ないのに、iPhoneのSafariはエラー表示はないものの期待している動作にならない。たぶんJavascriptのエラーだよねー。じゃあなんのエラー？ってときにコンソールログが役に立つ。それ以外にも要素がズレていたりとか。

PCのChromeとかで、デベロッパーツール相当がiPhoneのSafariで見れると何かと便利だよねぇって話。

Macでやる方法でもいいけどさ、Windowsで見れてもいいじゃんね。

参考）https://www.migaro.co.jp/tips/5946/

感想

さきに感想を書いておく。この記事に書いてあるとおりにやれば、私がやりたかったことはできる。けど、もっとスマートにできないかなぁっていうのが気になっている。

nodeやgitは開発者なら入っているツールなのでまぁいいとして、scoopはパッケージ管理ツールらしいが、以下の手順内で必要か？やりたいことを提供してくれるのはios-webkit-debug-proxyなわけで。それをgit cloneすればいいんじゃね？とか思ったり。

事前準備

iOS端末の「Webインスペクタ」をONにする。
Nodeをインストール
Gitをインストール
scoopをインストール

iOS端末の「Webインスペクタ」をONにする。

設定アプリ→Safari→詳細（一番下）のなかにある「Webインスペクタ」をONにすればOK。

Nodeをインストール

なければインストール、wingetでインストールできるらしいよ。

winget install -e --id OpenJS.NodeJS.LTS

Gitをインストール

なければインストール、wingetでインストールできるらしいよ。

winget install --id Git.Git -e --source winget

scoopをインストール

Powershellを起動して以下を実行

iex (new-object net.webclient).downloadstring('<https://get.scoop.sh>')

こんなエラーが出たら？

Initializing...
PowerShell requires an execution policy in [Unrestricted, RemoteSigned, ByPass] to run Scoop. For example, to set the execution policy to 'RemoteSigned' please run 'Set-ExecutionPolicy RemoteSigned -Scope CurrentUser'.
Abort.

これを実行する。

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

で再度以下を実行

iex (new-object net.webclient).downloadstring('<https://get.scoop.sh>')

成功したら、念のためバージョン確認

> scoop -v
Current Scoop version:
b588a06e (HEAD -> master, tag: v0.5.3, origin/master, origin/HEAD) chore(release): Bump to version 0.5.3 (resync) (#6436)

'main' bucket:
bc93f17dd8 (HEAD -> master, origin/master, origin/HEAD) rustic: Update to version 0.11.4

でこれを実行

scoop bucket add extras
scoop install ios-webkit-debug-proxy

上記が終われば、以下を実行

cd .\ios-safari-remote-debug-kit\src\
powershell -ExecutionPolicy Bypass -File .\generate.ps1

途中iOSのバージョンを選択する画面がでる。マイナーバージョンは実機近いものでいいと思う。

デバッグ実行

次は以下を実行

powershell -ExecutionPolicy Bypass -File .\start.ps1

途中でこんなエラーが出たら、

Found Node.JS and NPM, but not http-server. You can install it using 'npm i -g http-server'
引数 "path" の値が null であるため、引数を処理できません。引数 "path" の値を null 以外の値に変更してください。
    + CategoryInfo          : InvalidArgument: (:) [Set-Location]、PSArgumentNullException
    + FullyQualifiedErrorId : ArgumentNull,Microsoft.PowerShell.Commands.SetLocationCommand
    + PSComputerName        : localhost

以下を実行

npm i -g http-server

で再度以下を実行

powershell -ExecutionPolicy Bypass -File .\start.ps1

PCとUSBケーブルでiPhoneを接続すると、上記のターミナルにConnectedと表示される。
逆に切断するとDisconnectedと表示される。

Listing devices on :9221
Connected :9222 to 笙｡ainyan笙｡ (00008140-000219AE2862201C)
Disconnected :9222 from 笙｡ainyan笙｡ (00008140-000219AE2862201C)
Connected :9222 to 笙｡ainyan笙｡ (00008140-000219AE2862201C)

ブラウザでhttp://localhost:8080にアクセスすると、以下の画面が表示される。