【iOS】【Ubuntu】Ubuntu環境でiOS Safariのインスペクターを使う方法

はじめに

皆さんこんにちは、株式会社KANGEN Holdingsに所属するフルスタックエンジニアのA.K.です。
本投稿は、元A.K.チームのメンバーからの内容です。
ご本人のプライバシーに配慮し、ご希望により代理で投稿させていただいております。

プロジェクト先でiOSでのWeb表示のデバッグを依頼されましたが、セキュリティが厳しい環境で検証に使えるMacが無いため、

「Linuxの開発サーバーで動かしてほしい」

という依頼がありました。
普通はできないと疑問に思うのですが、以下のオープンソースツールを使えば検証できるかもしれないので試してほしいと説明がありました。

ios-safari-remote-debug-kit

このツールを使えばiOS Safariで実行されているWeb画面を、Chrome上からデバッグできます。
Windows版もありますが、今回はLinux版での手順について説明します。

注意点

• Ubuntuの検証のみで、他のLinuxディストリビューションでの動作は試していません
• iOS・Linux・Chromeのバージョンアップによって動作しなくなる場合もあるかもしれません
• ツールのバージョン更新が停止する可能性もあるので、当記事の閲覧時点で利用できないかもしれません

ios-webkit-debug-proxyとの違い

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

セットアップ時の説明で登場する「ios-webkit-debug-proxy」は同じようなツールにも関わらず、なぜ入れるのかと疑問に思うかもしれませんが・・・

ios-webkit-debug-proxy は、iOSデバイス上のWebKit（Safari）のデバッグ情報をパソコンに転送するプロキシツールです。
WindowsやLinuxで動作し、Chrome DevToolsと連携してリモートデバッグを可能にします。Googleが開発し比較的広く利用されているが、設定が多く動作のハードルは少々高いです。

一方、ios-safari-remote-debug-kit は、ios-webkit-debug-proxy を内部的に利用し、追加のスクリプトで設定を省き、動作を簡単にできるツールです
また、こちらの方が開発が新しく動作しやすいと思われます。

検証動作環境・必要なツール

今回の記事向けに、自宅のLinux環境とiPhoneSE2で試しました。

• PC
  • Ubuntu 24.04 LTS
  • GoogleChrome
  • Node.js
  • git
• iPhoneSE2 (iOS18.3.1)

準備

1. 事前に必要なアプリケーションやツールのインストール

インストール方法は検索で沢山出るので、今回は省略します

• GoogleChrome
• Node.js
• Git

2. リポジトリ情報を更新

まず、最新のリポジトリ情報を取得するために以下のコマンドを実行。

sudo apt update

これで、システムが最新のパッケージ情報を取得します。
次に、以下コマンドを実行

sudo apt upgrade --fix-missing

3. iOS端末側でWebインスペクタを実行できるよう設定する

インストール・動作手順

1.依存関係のインストール

以下のコマンドで、インストールします。

sudo apt-get install autoconf automake libusb-dev libusb-1.0-0-dev libplist-dev libtool libssl-dev

上記以外にも、手動でビルドが必要な依存関係をインストールします。
手動インストール用のディレクトリを作成します。
ディレクトリ名はlibmobileとしてますが、好みに応じて変更しても大丈夫です。

cd usr/local/src/
sudo mkdir libmobile
sudo chmod 777 libmobile/
cd libmobile

【依存関係取得リポジトリ先】

1. libimobiledevice/libplist
2. libimobiledevice/libimobiledevice-glue
3. libimobiledevice/libusbmuxd
4. libimobiledevice/libimobiledevice
5. libimobiledevice/libtatsu
6. libimobiledevice/usbmuxd

上記は上から順にインストールします。
作成したディレクトリに移動し、以下のコマンドの順で実行してインストールします。
※ 以下、libplistを例に説明

git clone https://github.com/libimobiledevice/libplist # 上記リポジトリ先からgit cloneコマンドでダウンロードする
cd libplist/ #ダウンロードした依存関係のディレクトリに移動
./autogen.sh #autogenのシェル実行
make
sudo make install
cd ..

インストールが完了すると、以下のキャプチャのようにメッセージが出現します。

libtatsuのインストールの際に、「Package 'libcurl', required by 'virtual:world', not found」とエラーが出た場合、以下をインストールする。

sudo apt install libcurl4-openssl-dev

環境によっては

• C++コンパイラ (g++) が見つからない (configure: error: C++ compiler not available or unable to compile)
• pkg-configで見つからない
• makeが正しくインストールされていない

などのエラーが出る場合があるため、必要に応じてインストールする

• g++

sudo apt install g++
g++ --version # インストールの確認
./configure # configure再実行

• make

sudo apt install make

• pkg-config

sudo apt install pkg-config

2.ios-webkit-debug-proxyのインストール・動作確認

ios-webkit-debug-proxyを、以下のコマンドの順で実行してインストール

git clone https://github.com/google/ios-webkit-debug-proxy.git
cd ios-webkit-debug-proxy
./autogen.sh
make
sudo make install

3.iOS端末を接続し、動作確認

① iOS端末をUSB接続する。
接続したら、iOS側で「このデバイスに写真やビデオへのアクセスを許可しますか?」と
出るので「許可」を選択。

② iOS端末と接続されていることを以下、コマンドで確認する

idevice_id -l

32桁のUUIDが表示されれば接続完了

③ 以下コマンドで、ios_webkit_debug_proxyを実行する

ios_webkit_debug_proxy

④ Chromeでインスペクタ画面の立ち上がり確認をする
「localhost:9221」をURLに入力し実行する。

iOSで開いてるページが表示されるので、リンクをクリックする。

インスペクタ画面が開いたことを確認
※この時点では、HTMLソースが表示されていなくても良い。

以上で、ios-webkit-debug-proxyの設定が完了です。
次はios-safari-remote-debug-kitのインストールになります。

4.ios-safari-remote-debug-kitのインストール

① ios-safari-remote-debug-kitを以下のコマンドの順で実行してインストール

git clone https://github.com/HimbeersaftLP/ios-safari-remote-debug-kit.git
cd ios-safari-remote-debug-kit
./autogen.sh
make
sudo make install

② srcディレクトリに移動し、generateを実行する

cd src/
./generate.sh

③ インストール中に、iOSのバージョンが求められるので、現在のバージョンを入力する

インストールが完了すると、以下のメッセージが表示される。

5.ios-safari-remote-debug-kitを実行

①以下コマンドでios-safari-remote-debug-kitを実行する

./start.sh

このように、起動メッセージが表示される。

You can then open http://localhost:8080/Main.html?ws=localhost:9222/devtools/page/1

と表示されている箇所のURLをコピーする。

②ChromeでコピーしたURLを貼り付け実行

このように、インスペクタ画面にHTMLソースが表示されれば完了

さいごに

設定手順は多く大変ですが、このようにMac無しでもiOSSafariのデバッグが可能です。
この設定を行い、私のLinux勉強にもなりました。

ios-webkit-debug-proxyについては、日本語記事がいくつか検索で見つかりますが、
ios-safari-remote-debug-kitについては、記述時点で存在せず書いてみようと思った次第です。

Windows版も試す時間があれば試したいと思います。