PCのGoogleChromeでスマホサイトをデバッグする方法

公開: 2013-09-19 21:45
更新: 2016-04-29 06:02
GoogleChromeちゃんにはUserAgent(お使いの端末情報)を変更する機能があります。

例えばUserAgentでスマホ版とPC版を分けている場合

「デバッグしずらないなぁ...なんだよWebインスペクタって」

となるつぶやく人がいるかも知れません。
そんなときはGoogleChromeでUserAgentを変更すればいいのです♪

やり方はとっても簡単。
まず右クリックを押して要素の検証を選択。
要素の検証を表示
お寿司食べたいなー
するとこんな画面が出てくるので
右下の歯車のマークをクリックしてください。
焼き肉も食べたいなー
左にあるOverridesを選び、UserAgentにチェックを入れて、
あとはiPhoneだったりAndroidを選択し、更新するだけです♪

簡単ですね♪

その他を選べば
UserAgentを自分で入力することが出来ます。
Chromeちゃんに入っていないUserAgentについては、UserAgent一覧!みたいなサイト(たとえばここ:http://www.openspc2.org/userAgent/)を使うといいですね♪

後は、おかしな所がないかデバッグ♪
あっきぃさんはだいたいこうやって開発してます♪

ちなみに画面サイズや、位置情報なんかも変更できるみたいですよ♪

参考になればうれしいです♪
ではでは♪

この記事をシェア
この記事にコメントする
書き込む
あっきぃ(@appstars_aki)
Web、iOSなフリーランサーです。好きなものはお寿司です。でもお寿司は高いので普段は雑草とか拾ったドングリを食べています。お仕事や意味もなく毎月お小遣いをくれる人を探してます。

お仕事の依頼や自分で作ったアプリのレビューを希望しちゃう方はaki@appstars.jpまでご連絡ください。