クローム 小技
Google Chorme で使える便利機能
サイト制作・WEBアプリ開発をやっていると、このサイトスマホで見たい、いやスマホで見なければという環境に思い当たることが多々あります。 そんな時に役立つツールを2点つかっていますよというご案内
■かなり有名な要素検証ツール ー デベロッパーツール ー(MAC<⌘+⌥+i> win<F12>)を開く
ツール内上部ナビゲーション右の方にある>≡のアイコンをクリック(ONで青くなります)
下にナビゲーションが出てくるのでEmulatonを選択
Device 機種選んでEmulateポチると機種版クロームエミュレーターになります。
実機で見るまでもないけど、レスポンシブレイアウトを見てみたい時
実機の検証機ないから、雰囲気というか困っているカスタマーの機種でエミュレートしてみたいって時
実機とは違う動作することは多々感じますが(javascriptの反応が違うとか)さらっと使用したいときにはかなりありがたい機能です。
Resetでエミュレートモード解除
もしくは一時的にPC版に戻したいときは
(MAC<⌘+⌥+i> win<F12>)でデベロッパーツールを閉じれば一時的にエミュレートが解除されます。
エミュレートされた状態でデベロッパーツールを開いているとその他で開いているタブにもエミュレートは適応されます。
Chrome Web StoreでChrome to Mobileで検索
インストールしましょう。
Chrome to Mobileの設定などはこちらのサイトを参考にいたしました
これを使えばアドレスバーに表示されているタブレット・スマホアイコンをクリックして機種を選択すれば完了です。
スマートフォン側では、クロームを起動していたらそのままURL読み込みます。
もしくは、プッシュ通知でURLの通知が届きます。
Googleアカウント、端末アプリの許可設定など、少しだけ設定面倒ですが、設定してしまえばこっちのものです。
URL送り放題です。
スマホで見る時、いちいちURLうつのめんどくさいんだよな〜とか、いう時はぜひお試しください