お問い合わせはコチラから

iPhone Safariで検証ツールを使用する方法

サイト運営

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
‎### Please refresh the page if you tap the "i" button and nothing happens ###Web Inspector expands Mobile Safari with a...

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日リリースの新しいアプリです。もし使ったことがなければ便利なのでぜひ使ってみましょう。

この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/
こんな記事も読まれています

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

タイトルとURLをコピーしました