皆さんこんにちは！

皆さんは開発するときになんのPCを使っていますか？？？

僕はお金ないので学校で配布されたWindowsを使用しています。

メモリも4GBとDockerで開発するときは結構止まったりします。

めちゃめちゃMac欲しい。。。

これだけの問題ならいいのですが、何と言っても本番環境のSafariのエラーほど苦しむものはない！

今日はそんなWindowsで開発している方でSafari特有のエラーログをChromeで見る裏技をご紹介します！

Windowsユーザーの皆さん、打倒Safariと行きましょう！！！

セットアップ

まずはSafariをデバッグするためのセットアップを行いましょう！

iTunesをインストール

こちらからiTunesをインストールしてください。

iTunesをインストールしないとデバッグできませんのでご注意を

Safariの設定

お使いのデバイスの「設定」→「Safari」→「詳細」から「Webインスペクタ」を「ＯＮ」にしてください。

scoopのインストール

次に「scoop」をインストールします。

scoopとはＭａｃで言うHomebrewみたいなものです。

WindowsのPower shellを「管理者として実行」し、下記のコマンドを入力

> Set-ExecutionPolicy RemoteSigned -Scope CurrentUser -Force
iwr -useb get.scoop.sh | iex

gitのインストール

既にgitコマンドを打てている人はこちらはスルーしてください。

> scoop install git

npmのインストール

こちらも既にnpmコマンドを打てている方はスルーしてください。

> scoopi install npm

extrasの追加

> scoop bucket add extras

デバッグ用のパッケージインストール

ここからは一気に行きます

> scoop install ios-webkit-debug-proxy

> scoop install nodejs

> npm install remotedebug-ios-webkit-adapter -g

これでデバッグを行う準備が整いました。

Safariのデバッグ

ここらは、iPhoneとWindowsをケーブルで繋いだまま行ってください。

Windowsに接続している状態でSafariでデバッグをしたいページを開いてください。

Power shellで以下のコマンドを実行

> remotedebug_ios_webkit_adapter --port=9221

chrome://inspect/#devicesにアクセス

Configureをクリックし、Target discovery settingsにlocalhost:9221を追加

すると、Remote TargetにSafariで開いたページのURLが表示されます。

下の「inspect」をクリック

そしたら、いつもの通りに開発者ツールでデバッグできます。

いかがだったでしょうか？？？

意外とすんなりとデバッグできることに驚きました。

また、WindowsにもHomebrewみたいな機能があるとは驚き。

みんなでChrome使えば平和なのにな～

以上、「iPhoenのSafariのエラーでしょ？？それ「remotedebug_ios_webkit_adapter」で解決できるよ」でした！

また、何か間違っていることがあればご指摘頂けると幸いです。

他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！

あと、最近「ココナラ」で環境構築のお手伝いをするサービスを始めました。

気になる方はぜひ一度ご相談ください！

Thank you for reading

参考記事

WindowsでiOSのSafariで開いたページをデバッグする