Webサイトのスマホ実機不具合解析のため、iPhoneで検証ツール(デベロッパーツール)を使いたいと思ったときに、chromeアプリが検証ツールに対応してなくて、ずっと困ってました。
iOSのchromeとsafariの中身は同じなので、safariでも検証ツールが使えれば目的は達成できるのですが、私の知る限り、できませんでした。
アプリを追加することでSafariに検証ツールを追加できることを知りましたのでまとめておきたいと思います。
Web Inspector:Safariに検証ツールを追加するアプリ
Web Inspectorというアプリを追加すると、Safariで検証ツールを使えるようになります。
Appleが現地時間2021年09月20日にリリースした「iOS 15/iPadOS 15」では、モバイルSafariでも機能拡張がサポートされましたが、このモバイルSafariでWebインスペクターを表示してくれる機能拡張「Web Inspector」が新たにリリースされています。
https://applech2.com/archives/20210922-web-inspector-extension-for-mobile-safari.html

Web Inspectorを有効化する
Appをインストールしたら、Safariの設定を開きます。
Safariの設定にある、拡張機能でWeb InspectorをONにします。
設定はこれで終わりです。
Web Inspectorを使う方法
実際にWeb Inspectorを起動する方法がわかりにくいです。
Safariでページを開いた後に、URL入力部分の左に、『あぁ』という部分があります。
その、『あぁ』をタップすると、メニューが開くので、その中の『Web Inspector』をタップします。
これでWeb Inspectorが起動します。
あとは、DOM、Elements、Console、Network、Resourceなどのタブが表示されるので、利用したいタブをタップすれば、検証ツールとして使えます。
例えば、DOMのCSSの確認をしたいのであれば、DOMタブで確認したいエレメントをタップし、Elementsタブに切り替えるとCSSなども確認できます。
まとめ
Web Inspectorは2021年09月20日リリースの新しいアプリです。もし使ったことがなければ便利なのでぜひ使ってみましょう。