簡単にスマホで実機確認をする方法

スマホで簡単に実機確認が出来る「ngrok」

Web開発をしていて、PCはそのまま見て確認をすることが出来るのですが、いつもスマホでの実機確認に困っていました。 これまでにはadobeのedge inspectやxcodeiOSシュミレーター、もしくはテストサーバーを用意するといった感じだったのですが、ngrokが便利だったので紹介したいと思います。

Macを前提にインストール方法を紹介します。 homebrewを使ってインストールします。homebrewを入れていない場合は、下記の記事を御覧ください。

ken-sayama.hateblo.jp

brew install ngrok こちらのコマンドでインストールをしてください。 インストールが終わりましたら、ngrok 3000 こちらのコマンドで立ち上げ、http://ランダム文字列.ngrok.comこちらのURLをスマホのブラウザで読み込めば実機確認ができます。

f:id:sayamaken0402:20151213221203p:plain

ngrok 3000 なお、こちらの3000はポート番号なので、お使いの環境に合わせてポート番号を変更することで実機確認をすることが出来ます。 control+cでngrokを終了。

ngrokが便利な点は、ターミナルにログが出力されるので、エラーのログを見たり、Railsであればbinding.pryでブレークポイントを立てパラメーターの確認等ができます。