【npm】ngrok×browser-syncでデザイナー確認・スマホデバッグ

gulp(browser-sync)で開発してたけど、実機テストできない

gulp(browser-sync、gulp-sass、gulp-pug、gulp-pleeease、gulp-plumber)でサクサクコーディング、を旨としているのですが、http://localhost:3000/ってどうやってスマホデバッグするのよと、思っておりました……。

ngrokでローカル環境トンネル出来るよ

Local by FlyweelというローカルWordpress開発ツールにURL発行機能があるんですが、用はそれと一緒で。

インストール

 

ngrok起動(3000はお使いのポート番号)

 

で動きます。

で、browser-syncで立ち上げたローカルサーバーなので、キチンとsyncしますので……
他の人に見せるのに使うときは、自分でくるくるスクロールしていると、他の人の画面でもスクロールしてますので注意。

参考
https://qiita.com/FJHoshi/items/9a379a987ea96eefa5da