スポンサーリンク

chromeのデベロッパーツールでiphoneの動作確認!モバイルフレンドリーか確認

こんにちは、シバヨシです。

スマートフォンサイトの開発等を行っている時にスマホで開発ツールを使うことがあります。

URLを打つことで確認することができるサイトもあるのですが、Chromeを操作で確認することができます。

Cromeでスマホの開発ツールをする場合の準備

USBケーブルでPCとスマホを接続

スマホのデバッグモードON

PCのChromeでinspect実行

スマホChromeの画面がPCに共有される

それでは手順を下記に示します。

開発者向けオプションでデバッグモードを有効化

スマホ側の作業

①設定⇒端末情報⇒ビルド番号を7回タップ

②「あなたは今開発者になりました」と表示されれば問題なし。

③設定に戻ると「開発者向けオプション」というメニューが追加されている

④その中の「デバッグ」⇒「USBデバッグ」をON

PCでの設定作業

①Chromeを開きURLバーに「chrome://inspect/#devices」を入力してアクセス

②スマホ側に「USBデバッグを許可しますか?」のポップアップが表示されるのでOKする

③スマホChromeで開いているタブ(ページ)の情報が表示されているのでデバッグしたいページの「inspect」をクリック

別ウィンドウでスマホと連動したページが表示されるので開発ツールでスマホを表示することが可能です。

まとめ

スマホ対応が出来ていないサイトはコンバージョンがよくありません。googleに評価がされませんですからね。モバイルフレンドリーを常に意識しましょう。

(Visited 19 times, 1 visits today)
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク