[個人用備忘録] iPadOSのSafariでの開発者ツールの表示方法

MacOS, iPadOS, iOSのそれぞれのSafariでデバッグする必要があり，特にモバイルデバイスのブラウザでの開発経験がなかったので調べまわった記録。
EdgeやChromeならF12キーで出るあのウィンドウの出し方について，ひとまずiPadOSの方法だけ

iPadOS

Macと接続して確認する場合

自分の環境だとMacが古いせいかもしれないが微妙に安定しないのであまり使わなくなった（MacBook (Retina, 12-inch, Early 2016) ）

1. iPadでSettings ＞ Safari ＞ Advanced ＞ Web Inspectorをオン
2. MacのSafariでSettings(cmd + ,) ＞ Advanced＞Show Develop menu in menu barにチェック
3. iPadとMacを有線接続した状態でMacのSafariのメニューバーのDevelop ＞ [接続しているiPadの名前] ＞ 開発者ツールを表示したいタブをクリック。iPadでもSafariを開いていないと表示されないで注意

Web Inspectorの導入

外部アプリのWeb Inspectorを使用してiPadに開発者ツールを表示する。
Macと接続するときより表示・使用できる機能は限られるがコンソールさえ見れればよかったため主に使用した。

1. App StoreでWeb Inspectorをダウンロード・インストール
2. Settings ＞ Advanced ＞ Extentions ＞ Web Inspectorをオン
3. 開発者ツールを表示したいページでタブバー右のアイコンからWeb Inspectorを起動