隆志(53)16この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。こんにちは、モバイルアプリサービス部の清田です。ついてご紹介してみたいと思います。以下のようなWebフロントエンドの実装も担当することがあります。少なからず、モバイル実機端末でしか確認できない挙動もあったりします。Safariブラウザで、inputフォームのフォントサイズが16px以下指定されている場合、スクリーンがフォーカスします。この挙動はPC上の表示確認では確認できない挙動です。モバイル端末固有の挙動をデバックするのは、ちょっと手間に感じたりするのではないでしょうか?パブリック環境化のデバックローカル環境で実装して、CIツールなどでパブリックなWeb環境にデプロイされた、HTMLの表示確認するフローだと思います。こちらでもモバイル端末でデバックすることができるのですが、確認までの幾つかのステップを踏まないといけません。今回やりたいデバック今回はローカル環境にサーバーを起動し、そのサーバー側のHTMLファイルを同じネットワークを通じでモバイル端末で確認することをしてみたいと思います。リモートデバックまでのフローリモートデバックするまでに、以下の順序にてご説明します。ローカル環境にWebサーバー準備Charlesのインストール&セットアップWi-Fi経由でリモートデバックローカル環境にWebサーバー準備それでは、ローカル環境にWebサーバーを準備したいと思います。ローカルにWebサーバーを構築をしたいだけなので、gulp-webserverを利用します。以下が環境情報になります。作業をターミナル上に移して、作業用ディレクトリ(charles-example)の作成と移動します。正常にどうさすると、作業ディレクトリ内にpackage.jsonというファイルが作成されています。モジュールのインストール今回利用するgulp、gulp-webserverをインストールします。同じ階層にdistディレクトリを作成し、index.htmlを格納します。gulpモジュール制御用のgulpfile.jsを用意ディレクトリ構造的には以下になります。