自習室 » Webブラウザ内蔵の開発者ツールの使い方 » iOSのMobile Safariで開発者ツールを使う方法（要Mac）

iOSのMobile Safariで開発者ツールを使う方法（要Mac）

Last modified by simdy on 2014/09/22, 18:24

概要

iOSのMobile Safariで、ブラウザの内部状態（DOMの状態、JavaScriptの変数状態、ネットワーク通信など）を見るための「開発者ツール」の立ち上げ方を説明します。

開発者ツールはiOS6以上で利用できます。ツール自体はMac上で動作するため、Macが必須です。
また、Mac上のSafariは最新版にアップデートしてお使いください。
たとえばiOS7の端末を使う場合Safari6.1以上、iOS8.0の場合はSafari7.1以上が必要です。

1．「設定」を開く

2．左側のメニューから「Safari」をタップ
3．右側の項目から「詳細」をタップ

4．「Webインスペクタ」を有効化

1．Safariを開く
2．任意のページを開く

1．iOS端末をケーブルで接続
2．iOS端末側で「コンピュータを信頼しますか？」というアラートが出ます。信頼をタップ

1．Safariを開く
2．「環境設定」を開く

3．[詳細」タブ→「メニューバーに”開発”メニューを表示」を有効化

1．Safariを開く
2．メニュー「開発」→ 接続した端末の名前 → Safari以下の任意のページを選択

端末が一覧に出てこない場合
Safariを最新版にしてください。iOS7の端末を使う場合Safari6.1以上、iOS8.0の場合はSafari7.1以上が必要です。

下の例では端末名「M-034」を接続し、hifiveのトップページを表示しています。

3．Webインスペクタが表示されます