46
52

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Windowsで iOSのSafariのWebアプリをリモートデバッグする方法

Last updated at Posted at 2020-07-06

#概要
Macはもっていないけど、Windows10 PCをつかって、iOS11 Safariで開いたWebアプリケーションをデバッグする方法です

使うもの

  • Windows10 PC
  • iOSデバイス(iPhone,iPad,iPod touchなど)
  • Chromeブラウザ(Windows版)

#準備

作業には Windows Power Shell(コマンドプロンプトの強化版、Windows10にプリインストールされている) を使う。

Step0. iTunesをインストールしておく

iTunesをインストールして、手持ちのiOSデバイスをUSBでWindows PCに接続しておく

Step1. Scoopを導入する

Scoopはコマンドラインからソフトウェアをインストールするツール。
(macでいうhomebrewのwindows版的なものと理解)

Power Shellを起動し、以下コマンドを実行。これでscoopがインストールされる。

Invoke-Expression (New-Object System.Net.WebClient).DownloadString('https://get.scoop.sh')

image.png

Step2. ios-webkit-debug-proxy をインストールする

Power Shellで以下コマンドを実行。
これでios-webkit-debug-proxyがインストールされる。

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

image.png

Step3. ios-webkit-debug-proxyを起動する

Power Shellで以下コマンドを実行。これで、ios-webkit-debug-proxyが起動する。

remotedebug_ios_webkit_adapter -— port=9000

Step4. iOSデバイスでSafariを起動する

iOSデバイス側で、Safariを起動してリモートデバッグしたいWebアプリ、Webサイトを開いておく

(もちろんiOSデバイスとPCはUSBでつないだまま)

Step5. Chromeからデバイスに接続

Chromeブラウザを開いて、以下のURLを開く

chrome://inspect/#devices

すると以下のような画面が出るので Configure をクリック

image.png

すると、ダイアログが表示されるので、そこにlocalhost:9000を追加してDoneをクリックする。
image.png

これで、しばらくまつと、以下のようにSafariで動作しているWebアプリが表示される

image.png

Step6. ChromeのDevToolでデバッグする

inspectをクリックすると、おなじみのDevToolが起動し、Windows上からiOS Safari上のアプリの各種デバッグが行えるようになる。

image.png

46
52
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
46
52

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?