Mac側の準備
- Safari→「環境設定」
- 「詳細」タブ 「メニューバーに”開発”メニューを表示」にチェックをいれる。
- メニューバーに「開発」が追加されていることを確認する。
iphone
iPhone側の準備
- ホーム画面から「設定」→「Safari」を開く。
- 画面一番下の「詳細」を開き、「Webインスペクタ」をONにする。
検証
- iPhone と Mac をUSBケーブルで接続する.
- 開発→xxxのiPhone
- 対象ページを選択
- ●参考サイト
- iOSのSafariのWebインスペクタを使ってみる
Android
Android側の準備
「設定」→「開発者向けオプション」→「USBデバッグ」をオン
「開発者向けオプション」を表示するには
「設定」→「端末情報」→「ビルド番号」
「ビルド番号」を7回タップすると「開発者向けオプション」が有効になる
検証
- Android と Mac をUSBケーブルで接続する
- 対象ページをAndroidのChrome で開く
- MacのChromeで、chrome://inspect/を開く
- safariのWebインスペクタを使ってみるの下のinspectを選択