起業戦士うつリーマンの野望

うつっぽいサラリーマンです。起業したいと思っています。

スマホでサイト開発 chromeのデベロッパーツールでusbデバッグ

自分の作成中のサイトをスマホ(実機)で確認したい

作成中のサイトは、積極的にスマホで利用して欲しいので、chromeデベロッパーツールを使ってモバイル向けのデザイン等のデバッグを行っています。

これでスクリーンサイズを指定したデバッグができるのですが、やはり、実機(スマホ)でどう表示されるか半信半疑な状態でのデバッグになります。文字やボタンのサイズ感、PCでは動作しない機能(LINEへの共有)、キーボードが表示された場合のサイトの見え方など、UXの高いサイトを作ろうと思うと実機で確認できた方がローカル環境での開発の時点での不安要素が少なくなります。

chromeデベロッパーツールは、PCとスマホ(現時点でandroid端末でのみ確認しています)をUSBで接続しローカル環境で開発中のサイトをスマホに表示させ、PC側のchromeデバッグツールを用いてHTML、CSSデバッグすることがきます。もちろん変更したHTML,CSSは即時にスマホで確認ができます。

ローカル環境で開発中のWEBサイトをchromeデベロッパーツールを使いUSBデバッグする方法

スマホ側の準備

1. 「設定」より「開発者向けオプション」で「USBデバッグ」を「ON」にする

開発者向けオプションが非表示の場合は、「端末情報(電話情報)」を数回タップすると表示されるようです(私のAndroid 7.0 もタップして表示させました) 

2. スマホをPC(私はmac OS X El Capitan 10.11.6)にUSBで接続する

スマホにUSBデバッグを許可するかダイアログが表示されたら、許可してください。

PC側の準備

1. Remote Devicesで接続確認

デベロッパーツールを起動し、「×」の隣にある「Customize and control DevTools」より「More Tools > Remote Devices」を開きます。「chrome://inspect/」にアクセスしても確認できます。

USB接続したスマホが表示されていれば、USB接続が成功しています。

2. ポートの開放

Remote Devicesの「Settings」にある「Port Forwarding」にチェックします。デフォルトでは8080となっています。「chrome://inspect/」にアクセスしている場合は「Port forwarding settings」で「Enable port forwarding」にチェックします。

デバッグの開始

1. スマホchromeで「localhost:8080」に接続
2. PCのchromeデバッグする

PCのchromeデベロッパーツール「Remote Devices」にスマホchromeのタブが表示されるので「Inspect」をクリックする。「chrome://inspect/」にアクセスしている場合も同様。

 

これでPCでデバッグするとスマホで変更結果を確認できるようになります。

広告を非表示にする