iPhoneで要素を検査する4つの簡単な方法

iPhoneでウェブサイトをデバッグする必要があるが、"Inspect Element "が見つからない？この一般的なブラウザ機能はiPhoneのSafariには組み込まれていませんが、アプリを購入しなくてもウェブサイトの要素を検査できる方法はまだあります。公式の方法はSafari Developer Toolsを使うことで、iPhoneをMacに接続する必要があります。コンピュータが近くにない場合は、Web Inspectorという無料アプリをインストールするか、JavaScriptブックマークを作成する（これはChromeでも使える）。また、ウェブアプリのデバッグではなく、単にウェブサイトの見た目を変更したい場合は、「Edit Webpage」というiPhoneのショートカットを使うこともできます。

知っておくべきこと

• iPhoneをMacに接続して要素を検査するには、Safari Developer Toolsを使用します。
• コンピュータなしで要素を検査するには、Web Inspectorアプリケーションをインストールするか、JavaScriptブックマークを使用します。
• ウェブサイトからテキストを編集したり、画像を削除するには、ショートカットアプリケーションの「ウェブページを編集」ショートカットをお試しください。

方法1

Safariデベロッパーツールを使う

1. iPhoneをUSBケーブルでMacに接続します。サードパーティ製のツールを使わずにiPhoneのSafariでInspect Elementを使いたい場合は、Safari Developer Toolsを使えば可能です。ただし、Developer ToolsはmacOSでしか利用できないため、この方法を使うにはコンピュータの近くにいる必要があります。

   • Wi-Fiで接続すると、エレメントを検査できないので、「」が必要です。
2. iPhoneでWeb Inspectorを有効にする。方法は以下の通りです：

   • iPhoneの「設定」を開きます。
   • 下にスクロールして「Safari」をタップします。
   • 下にスクロールして「詳細」をタップします。
   • Webインスペクタ」スイッチをタップしてオン（緑）にします。
3. MacのSafariで「開発」メニューを有効にする。MacでSafariを開いたときにすでに「開発」というメニューが表示されている場合は、このステップは飛ばしてかまいません。そうでない場合は、ここで有効にします：

   • Safariメニューをクリックします。
   • 設定」をクリックします。
   • 詳細設定」をクリックします。
   • "メニューバーに開発メニューを表示する "を選択します。
4. iPhoneで検査したいウェブサイトに移動する。iPhoneのSafariを使って、Inspect Elementを使いたいサイトに移動します。
5. MacでDevelopメニューをクリックします。ここにiPhoneが表示されます。
6. iPhoneにマウスカーソルを合わせ、ウェブサイトを選択します。iPhoneで開いているサイトのInspect ElementパネルがMacで開きます。

   • Macの「要素」タブで項目を選択すると、iPhoneで選択した要素がハイライト表示されます。
   • iPhoneをMacに接続したままInspect Elementを使い続けたい場合は、もう一度Developメニューをクリックし、Connect via Networkを選択します。

方法 2

Web Inspector Extension を使用する

1. App StoreからWeb Inspectorをインストールします。この無料のiPhone/iPad用Safari拡張機能を使うと、コンピュータがなくても要素を検査できます。App Storeで「Web Inspector」を「And a Dinosaur」で検索するか、.NET Frameworkから直接ダウンロードしてください。

   • Web Inspectorは、iPhoneをMacに接続する必要がないので、Safariで要素を検査するのに便利だ。Chromeでデバッグしたい場合は、その必要がある。
   • この拡張機能はSafariの「Web Inspector」と同じ名前ですが、Appleの公式ツールではありません。
2. SafariでWeb Inspector拡張機能を有効にします。方法は以下の通りです：

   • Safariを開き、任意のウェブサイトにアクセスします。
   • アドレスバーの「Aa」をタップします。
   • 拡張機能の管理」をタップします。
   • Web Inspector」の横にあるスイッチをタップして有効にします。
   • 完了」をタップします。
3. 検査したいウェブページに移動します。これで Web Inspector が有効になり、Safari から直接要素を検査できるようになります。
4. Web Inspector に Web サイトへのアクセス権を与えます。そのためには、もう一度「Aa」をタップし、「Web Inspector」を選択します。

   • Web Inspector によるこの Web サイトの要素の検査を 1 日だけ許可するには、[1 日だけ許可] を選択します。
   • Web Inspector を 1 日以上使用する場合、または複数の Web サイトで使用する場合は、[常に許可] を選択します。次に、[この Web サイトで常に許可] または [すべての Web サイトで常に許可] を選択できます。
     • 後者のオプションを選択すると、今後 Web サイトへのアクセス許可を Web Inspector に与える必要がなくなります。
5. もう一度「Aa」をタップし、Web Inspector を選択します。Safariの下部にあるおなじみの「要素を検査」ツールが展開されます。

   • 終了したら、「Aa」をダブルタップしてWebインスペクタを閉じます。

方法3

JavaScriptブックマークを使用する

1. 検査したいウェブサイトにアクセスします。このトリックでは、JavaScriptコードの文字列を含むブックマークを作成して、Inspect Elementを任意のiPhoneウェブブラウザに表示します。このトリックはSafariでもChromeでも使えますが、ブックマークを作成するプロセスは少し異なります。
2. ブックマークを作成するには、.

   • Chrome：三点メニューをタップし、「ブックマークに追加」を選択する。
   • Safari：下部にある共有アイコンをタップし、「お気に入りに追加」をタップします。
3. ブックマークを編集してURLを置き換える。ブックマークができたので、編集する必要があります。
4. ブックマークを開いて編集します。

   • Chromeを開きます：三点メニューをタップし、一番上のブックマークを選択します。新しいブックマークをタップ＆ホールドし、「ブックマークを編集」をタップします。
   • Safari下部にあるブックマークをタップし、「お気に入り」をタップします。作成したブックマークを長押しし、「編集」をタップします。
5. ブックマークの内容をコードに置き換えます。ブックマークの名前を「Inspect」に変更し、URLまたはリンクフィールドに以下のコードをそのまま貼り付け、ブックマークを保存します。

   javascript:(function () {var script=document.createElement('script');script.src="//cdn.jsdelivr.net/npm/eruda";document.body.appendChild(script); script.onload = function () { eruda.init() } }); })})();
6. ウェブサイトを更新し、ブックマークを開きます。Chromeでブックマークを開くには、3つの点をタップしてブックマークを選択し、「検査」をタップします。Safariでは、お気に入りの中にInspectブックマークがあります。しばらくすると、検査したいページに歯車のアイコンが表示されます。
7. 歯車をタップして「要素の検査」を開きます。これで、パネルの上部にある「要素」タブを使って、現在のページの要素を検査できるようになります。

方法4

ウェブページを編集するショートカットを使う

1. iPhoneのショートカットアプリを開きます。要素の検査」を使ってウェブサイトの外観を編集するのが目的なら、「ウェブページの編集」というiPhoneのショートカットを使っても同じ効果が得られます。このショートカットでは、従来のInspect Element画面は表示されませんが、どのウェブサイトにもライブで変更を加え、見た目を確認することができます。

   • このショートカットはApp Libraryにあります。
   • テキストを編集したり、閲覧中のウェブサイトから画像やその他のオブジェクトを削除したい場合に便利です。
2. ギャラリー」をタップします。ページの右下に表示されます。
3. ウェブページを編集」のショートカットを検索します。検索バーに「ウェブページを編集」と入力し、検索結果の上部にある「ウェブページを編集」をタップします。
4. ショートカットを追加」をタップします。ページの下にある青いボタンです。
5. ショートカットアプリでスクリプトを許可します。ウェブページの編集」を使えるようにするには、ショートカットの設定を簡単に変更する必要があります：

   • iPhoneの「設定」を開きます。
   • iPhoneの「設定」を開きます。
   • 詳細設定」をタップします。
   • "スクリプトの実行を許可 "をトグルする。
6. Safariアプリで検査したいウェブサイトを開きます。修正したいウェブサイトであれば何でも構いません。
7. 共有アイコンをタップし、ウェブページの編集を選択します。共有アイコンとは、画面下部の青い四角に上向き矢印のアイコンのことです。
8. 許可」をタップします。これで、ブラウザウィンドウでサイトを「編集」する許可がショートカットに与えられます。
9. Xをタップしてメニューを閉じます。ウェブサイトに戻り、視覚的に編集できるようになります。

   • 任意の要素をタップして編集します。これで、Safariに公式のInspect Element機能が組み込まれていなくても、ウェブサイト上のテキストや画像を編集できるようになりました。

この記事は、CC BY-NC-SAの下で公開された「 4 Easy Ways to Inspect Element on an iPhone 」を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。