Windows から iPad Safari をデバッグして TweetDeck をアプリのように使う

目的

本記事の目的は iOS でアプリのように TweetDeck を使えるようにすることです。
詳細は以下の記事を参照ください。
[iPad で TweetDeck をネイティブアプリのように使う][link-1]
[link-1]:https://qiita.com/fiftystorm36/items/415d9e0e08a1d705dc78

[元記事][link-1]のコメントにもあるように iPad OS 13.1.2（以降？）では Safari から「ホーム画面に追加」するだけで OK です。

それ以前の OS で Safari から「ホーム画面に追加」するだけでは、開く度にログインが必要でとても使う気になりません。
Safari の Cookie を編集してログイン状態が継続されるようにする必要があります。

[元記事][link-1]では Mac からデバッグする方法が紹介されていますので、本記事では Windows からデバッグする方法を紹介します。

手順

RemoteDebug iOS WebKit Adapter の準備

[Getting Started][link-2] に従って準備する。Step 3 以降は以下を参照。
[link-2]:https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter#getting-started

iTunes、Chrome の準備

1. Windows PC で iTunes、Chrome をインストール。
2. Chrome で chrome://inspect/#devices を開く。
3. Devices -> Discover network targets にチェックが入っていることを確認する -> Configure... -> localhost:9000 を追加。

設定手順

1. iPad の設定で Web インスペクタ を ON にする。
   設定アプリ -> Safari -> 詳細 -> Web インスペクタ ON

2. iPad の Safari で TweetDeck を開いてログイン。

3. Windows PC の Powershell で下記を実行。

   remotedebug_ios_webkit_adapter --port=9000
   

4. Windows PC と iPad を接続し、iPad のロックを解除。

5. iPad、iTunes で Windows PC を信頼。

6. Chrome で chrome://inspect/#devices を再度開く。

7. Remote Target 下に TweetDeck が表示されるのでそれを inspect。

8. 後は元記事の「Cookie の取得」以降と同じです。開いた DevTools 画面の Application タブから Cookies にアクセスできます。

参考

• [iPad で TweetDeck をネイティブアプリのように使う][link-1]
• [GitHub - RemoteDebug/remotedebug-ios-webkit-adapter: Debug Safari and WebViews on iOS from tools like VS Code and Chrome DevTools][link-2]