スマホ実機で確認をしたいけれど、それだとソースをすぐに見ることができない。
画面幅によって表示崩れが起こるらしいのでいろんな画面幅で表示をさせたい。
そんな時に便利なのが、『PCブラウザのUA変更』です。
UA（User Agent）を変更することでブラウザ上でスマホ最適化されたサイトを見ることができ、
同時に最適化サイトのソースコードを参照することもできます。
ここではGoogle Chromeを使用したUA変更のやり方についてご紹介します。
1. デベロッパー・ツールを開く
Windowsの場合：F12キー
Macの場合：Command + Option + I
上記ショートカットキーを押すことで、デベロッパー・ツールを開くことができます。
右上に表示されているのがサイトのDOMツリーです。
2. デバイスモードを起動する
右上、スマートフォンのアイコンをクリックすると表示画面幅が狭くなります。
これがデバイスモードが起動されている状態です。
左上にある"Device"横のセレクトボックスを選択することで、
各スマホデバイスの画面幅に直すことができます。
3. 最適化サイトを表示させる
この状態でサイトをリロードすると最適化されたサイトが表示されます。
もちろんページまるまる表示できますし、ソースコードを確認することもできます。
ちなみに、Deviceでタブレットを選択するとタブレットで見た時のサイトが表示されます。
タブレットも最適化に含めている場合は、タブレットの最適化サイトを表示することもできます。
デベロッパー・ツールの機能を使えばバグの調査やスタイル調整も行うことができます。
ぜひ活用してみてください。