スマホでサイト開発 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/」にアクセスしている場合も同様。
