スマホでローカル環境に接続してデバッグしてみた

スマホが普及した今の時代、web開発においてはスマホへの対応は必須項目となっています。

かのGoogle先生も「モバイルファーストインデックス」なるものを導入していますし、もはやモバイルの方が重視されてもおかしくない社会になっています。

「モバイルファーストインデックス」とは、要するに

「サイトの評価基準をPCじゃなくてモバイルにしますよー」ということですが、詳細は割愛します。僕も詳しくないので。

とにかくそんな時代ですので、開発においてもスマホレスポンシブには気を使うわけです。

スマホ表示のデバッグを行うには、とりあえず簡単にやるなら各ブラウザのデベロッパーツールを使うのが一般的（？）です。

↓こんなん

ですが、あくまでPCでのマウス操作。

実際にスマホ上で動かして確認したい！

という場合にはやや物足りません。

ということで、ローカルでの開発環境でもスマホから操作する方法を調べてみました。

手順はざっくり下記の通り

​1. スマホを開発者モードでPCに接続
2.Chromeで接続の設定をする
3.スマホでサイトにアクセスする

今回の私の使用デバイスは

PC: MacBook

スマホ: Galaxy s9

です。

GalaxyなのでAndroidでの操作をベースに書きますが、

端末が違くても概ねやることは変わらないはずです。

スマホをデバッグモードでPCに接続

USBケーブルを使い、スマホとPCを接続しましょう。

その際、スマホを「デバッグモード」にする必要があります。

設定の「開発者向けオプション」の「USBデバッグ」をONにします。

「開発者向けオプション」は初期状態だと表示されていないので、

「Android 開発者向けオプション」等でググって表示させましょう。

また、PCとの接続には専用のアプリケーションが必要な機種もあるため、それぞれに必要なものを揃えましょう。

Chromeで接続の設定をする

接続ができたらPC側で設定をしていきます。

PCのChromeのURLに「chrome://inspect/#devices」と打ち込むと

専用の画面が出てきます。

まず、Devices欄に「Port Fowarding...」というボタンがあるので押します。

すると、「Port」と「IP adress and port」を入力できるので、

それぞれ入力します。今回のローカル環境は「127.0.0.1:5500」で立ち上げたので

Portに「5500」、IP〜に「127.0.0.1:5500」と入力しました。

入力できたら「Enable port fowarding」にチェックを入れてDoneで完了します。

正しくデバイスが接続できていれば、Remote Target欄にデバイス名が表示されているはずです。（私のGalaxyの場合「SCV38」といった感じ）

その下に「inspect」というボタンがあるので押します。

専用のウインドウが開いたらOKです。

スマホでサイトにアクセスする

ここまできたら後はスマホで用意した環境にアクセスするだけです。

スマホ側のChromeで、先ほど入力したアドレスを入力しましょう。

今回は「127.0.0.1:5500」と入力。

すると、先ほど開いたウインドウとスマホの画面が連動して表示されるはずです！

Chromeの開発者ツールが使えるので、スマホで動かしてPCでデバックができます！

まとめ

スマホでのスクロールやスワイプ等の挙動、表示などはやはりスマホ上で確認した方が確実なので、たまにはこうして確認していきたいです。