クローム 小技

Google Chorme で使える便利機能

 

サイト制作・WEBアプリ開発をやっていると、このサイトスマホで見たい、いやスマホで見なければという環境に思い当たることが多々あります。 そんな時に役立つツールを2点つかっていますよというご案内

 

■かなり有名な要素検証ツール ー デベロッパーツール ー(MAC<⌘+⌥+i> win<F12>)を開く
ツール内上部ナビゲーション右の方にある>≡のアイコンをクリック(ONで青くなります)
下にナビゲーションが出てくるのでEmulatonを選択
Device 機種選んでEmulateポチると機種版クロームエミュレーターになります。

 

実機で見るまでもないけど、レスポンシブレイアウトを見てみたい時
実機の検証機ないから、雰囲気というか困っているカスタマーの機種でエミュレートしてみたいって時

実機とは違う動作することは多々感じますが(javascriptの反応が違うとか)さらっと使用したいときにはかなりありがたい機能です。

Resetでエミュレートモード解除

もしくは一時的にPC版に戻したいときは

MAC<⌘+⌥+i> win<F12>)でデベロッパーツールを閉じれば一時的にエミュレートが解除されます。

エミュレートされた状態でデベロッパーツールを開いているとその他で開いているタブにもエミュレートは適応されます。

 

2.Chrome to Mobile 拡張機能

Chrome Web StoreChrome to Mobileで検索

インストールしましょう。

Chrome to Mobileの設定などはこちらのサイトを参考にいたしました

これを使えばアドレスバーに表示されているタブレットスマホアイコンをクリックして機種を選択すれば完了です。

f:id:imd-itsolution:20140515122703p:plain

スマートフォン側では、クロームを起動していたらそのままURL読み込みます。
もしくは、プッシュ通知でURLの通知が届きます。

 

Googleアカウント、端末アプリの許可設定など、少しだけ設定面倒ですが、設定してしまえばこっちのものです。

URL送り放題です。

スマホで見る時、いちいちURLうつのめんどくさいんだよな〜とか、いう時はぜひお試しください