スマホのWebサイトをMacでインスペクトする

Mac側の準備

  1. Safari→「環境設定」
  2. 「詳細」タブ 「メニューバーに”開発”メニューを表示」にチェックをいれる。
  3. メニューバーに「開発」が追加されていることを確認する。

iphone

iPhone側の準備

  1. ホーム画面から「設定」→「Safari」を開く。
  2. 画面一番下の「詳細」を開き、「Webインスペクタ」をONにする。

検証

  1. iPhone と Mac をUSBケーブルで接続する.
  2. 開発→xxxのiPhone
  3. 対象ページを選択
  4. ●参考サイト
  5. iOSのSafariのWebインスペクタを使ってみる

Android

Android側の準備

「設定」→「開発者向けオプション」→「USBデバッグ」をオン

「開発者向けオプション」を表示するには
「設定」→「端末情報」→「ビルド番号」
「ビルド番号」を7回タップすると「開発者向けオプション」が有効になる

検証

  1. Android と Mac をUSBケーブルで接続する
  2. 対象ページをAndroidのChrome で開く
  3. MacのChromeで、chrome://inspect/を開く
  4. safariのWebインスペクタを使ってみるの下のinspectを選択

●参考サイト
Android の Chrome で開いたページを、PC から DevTools でデバッグする