カテゴリー
Linux環境でiPhone実機デバッグ！ios-webkit-debug-proxyとChromeでWebインスペクタを動かす方法
※ 当ページには【広告/PR】を含む場合があります。
2024/10/21
Web開発を行っていると、デスクトップのブラウザでは問題なく表示されるのに、特定のモバイル端末、特にiPhoneのSafariでだけレイアウトが崩れたり、スクリプトがエラーを吐いたり…なんていう状況、時々あります。
macOS環境であればXcodeに付属のSafari Webインスペクタを使えば比較的簡単に実機デバッグができますが、メインの開発環境がLinuxだと、この問題はなかなかに厄介です。
「LinuxでもiPhone実機を繋いで、あの便利なWebインスペクタを使いたい！」
そんな風に思ったことはありませんか？
今回は、そんなLinux開発者のためのiPhone実機デバッグ環境の構築方法を、具体的なツールを交えながら解説していきます。 この記事では、あなたもLinuxマシンから直接iPhone Safariのコンソールを覗き、DOMを書き換え、スクリプトの動作を追うことができるようになるでしょう。
TL;DR
本記事のターゲットは、
普段LinuxでWeb開発をしている方 iPhone実機でのみ発生するSafariのバグに悩まされている方 ios-webkit-debug-proxyを使ったデバッグ環境構築に興味がある方
向けの内容です。 Linux環境でも、いくつかのツールを組み合わせることで、macOSと遜色のないデバッグ体験を手に入れることが可能です。
デバッグ環境に必要なもの
まずは、今回のデバッグ環境を構築するために必要なツールを揃えましょう。
ブラウザ : Google Chrome iOSデバッグプロキシ : ios-webkit-debug-proxy リモートデバッガー (任意) : ios-safari-remote-debug-kit 物理接続 : PCとiPhoneを繋ぐLightningケーブル
中心となるのは、Googleによって開発された
ios-webkit-debug-proxyLinuxでのデバッグ環境構築
それでは、実際に環境を構築していきましょう。
1. ios-webkit-debug-proxyのインストール
まずは、中核となる
ios-webkit-debug-proxy $ brew install ios-webkit-debug-proxy
これだけでインストールは完了です。他のOSやディストリビューションへのインストール方法は、公式のGitHubリポジトリを参照してください。
2. iPhone Safariの設定
次に、デバッグ対象となるiPhone側の設定を行います。これは簡単で、Webインスペクタ機能を有効にするだけです。
iPhoneの「設定」アプリを開き、「Safari」を選択します。 一番下までスクロールし、「詳細」をタップします。 「Webインスペクタ」のトグルをONにします。
これでiPhone側の準備は完了です。
Webインスペクタを起動する
いよいよ、LinuxマシンとiPhoneを接続して、Webインスペクタを起動します。
1. PCとiPhoneをLightningケーブルで接続します。iPhone側で「このコンピュータを信頼しますか？」というポップアップが表示されたら、「信頼」をタップしてください。 2. デバッグしたいWebページをiPhoneのSafariで開いておきます。 3. PCのターミナルから ios_webkit_debug_proxyを起動します。
$ ios_webkit_debug_proxy
4. Google Chromeを開き、アドレスバーに http://localhost:9221/と入力してアクセスします。
すると、現在接続されているiPhoneの情報が表示されるはずです。
表示されたデバイス名のリンクをクリックすると、見慣れたChromeの開発者ツールが立ち上がり、iPhoneのSafariで開いているページのDOMツリーやコンソールが表示されます。これで、リアルタイムに要素を検証したり、コンソールログを確認したり、スクリプトを実行したりできるようになりました。
リモートデバッガーを使った高度なデバッグ
ios-webkit-debug-proxyios-safari-remote-debug-kitインストールと起動
まずは
git clone $ git clone https://github.com/HimbeersaftLP/ios-safari-remote-debug-kit.git
$ cd ios-safari-remote-debug-kit/src
なおこのツールはローカルサーバーとして動作するため、Node.jsの
http-server次に、ヘルパースクリプトを実行して、お使いのiPhoneのiOSバージョンに最も近いものを選択します。
$ ./generate.sh
準備ができたら、デバッグサーバーを起動します。
$ ./start.sh
あとはコンソールに表示された内容にあるURLアドレスをChrome側で開くことでiosのデバッグが可能となります。
デバッグ作業のTips
実機デバッグを効率的に進めるために、いくつか注意点があります。
minifyを無効にする : ビルド時にコードをminify（圧縮・難読化）していると、エラーが発生した箇所が特定困難になります。デバッグビルドではminifyを無効にしておきましょう。 ソースマップを出力する : minifyを無効にするのと同じ理由で、ソースマップを出力しておくことが非常に重要です。これにより、変換・結合前のソースコードでエラー箇所を追跡できます。 ログレベルを上げる : 可能な限り多くの情報をコンソールに出力させるため、アプリケーションのログレベルを INFO以上に設定しておくと、問題解決のヒントが増えます。
実践：個人的デバッグ作業の記録
せっかくなので、私がこの環境を使って実際に解決した問題について、少しお話しさせてください。
ある時、私が開発しているWebページが、デスクトップブラウザでは正常に表示されるのに、iPhoneのSafariで開くと真っ白になってクラッシュするという問題に直面しました。
まさに、今回構築したデバッグ環境の出番です。早速iPhoneを接続してコンソールを確認すると、以下のようなエラーが出力されていました。
[Error] SyntaxError: Invalid regular expression: invalid group specifier name
RegExp (main.js:79191)
#...
どうやら、正規表現の解釈でエラーが起きているようです。エラーメッセージをヒントに調査を進めると、原因はJavaScriptの正規表現における
問題のコードは以下のような形でした。
// 修正前: (?<!...) という否定後読みがiOS Safariで機能しない
const regex = /(?<!\$)([^\$]+\$)(?!\$)/g;
原因が分かれば、あとは後読みを使わない代替表現に書き換えるだけです。
// 修正後: 後読みを使わない表現に
const regex = /\$([^$\r\n]+)\$/g;
後読みがないと少し複雑なマッチングが難しくなることもありますが、そこは創意工夫で乗り越えるしかありません。 修正したコードをデプロイし、再度iPhone実機で確認したところ、無事にページが表示されるようになりました。
このように、実機デバッグ環境があれば、モバイル特有の問題にも冷静かつ迅速に対処することができます。
まとめ
今回は、Linux環境でiPhone実機を使ったWebデバッグ環境を構築する方法を紹介しました。
ios-webkit-debug-proxyを使えば、LinuxからiPhone SafariのWebインスペクタを操作できる。 iPhone側の設定で 「Webインスペクタ」を有効にする 必要がある。 localhost:9221にアクセスすることで、Chromeの開発者ツール経由でデバッグを開始できる。 minifyの無効化 や ソースマップの出力 は、効率的なデバッグのために不可欠。
macOSがないと諦めかけていたiPhoneのデバッグも、これらのツールを使えばLinuxで完結できます。デスクトップとモバイルの表示差異に悩まされた際には、ぜひこの方法を試してみてください。