iPhone で開発者ツールを使う方法

最終更新日: 公開日: 2024年01月

iPhone で開発者ツールを使う方法

先日 【Safari】iPhone で 電話番号にリンクが自動挿入される問題 を公開しました、開発者ツールのスマートフォンモードでは問題なく表示されますが実機では表示が崩れてしまう問題が発生しました。

実機のスマートフォンで開発者ツールを使うことが初めてだったため、操作を忘れないように備忘録としてスマートフォンで開発者ツールを使う方法を説明します。

環境
PC: MacOS
PC 版 Chrome: ver. 41
iPhone 端末: iPhone 12
スマホ版 Safari: 17.2.1

まずは PC とスマートフォンを接続してください。

開発者ツールの開き方

デバイスを認証していない場合は「OK」で認証してください。

対象のブラウザを開いた状態で上部メニューの「開発」をクリック。

スマホ版開発ツールWebインスペクタ設定前

上の状態ですと、まだ開発者ツールを使うことができません。以下の画像のように「Webインスペクタ」を On にしてください。iPhone の 設定 > Safari > 詳細 から可能です。

Webインスペクタ設定

上記の設定をしたうえで、Safari で対象のページを開いた状態にすると以下のようになります。今回は弊社のトップページを開いています。グレー文字の Safari の下のリンクをクリックすると開発者ツールが PC 画面に表示されます。

スマホ版開発ツールWebインスペクタ設定後

開発者ツールの使い方

下記が開発者ツールを開いた時の初期状態です。まだスマホ画面上では何も要素を選択していません。

スマホ版開発者ツール初期画面

まずは開発者ツール左上の矢印をクリックして要素を選択できる状態にしてください。

今回は見出しの文言を変更したいと思います。
変更したい箇所「どうすれば購入意欲をもってもらえるか?」をタップすると要素を選択できます。

スマホ版開発者ツール変更箇所選択後

選択後の開発者ツールは以下です。

スマホ版開発者ツール変更箇所選択後

文言の最後に「??」を追加してみます。

スマホ版開発者ツール変更箇所変更後

スマホ画面上でも書き換わることが確認できました。

スマホ版開発者ツール変更箇所変更後スマホ画面

次に文字色を変更してみます。
赤く囲んでいる部分をクリックするとスタイルの画面が表示されます。
文字色を color: blue に変更します。

スマホ版開発者ツールスタイル変更

スマホ画面上でも色が変わることが確認できました。

スマホ版開発者ツールスタイル変更後

もちろん PC 版開発者ツールと同様スマホ画面の再読み込みを行えば変更はリセットされます。
PC 上でスマートフォン版開発者ツールを使えるようにするための準備さえしてしまえばあとは PC で使用する時とほぼ同じ操作感で書き換えが可能です。

 

Contact

ご質問等ありましたら,お手数ですが弊社の個人情報保護方針をお読み頂いた上でフォームからお願い致します.

 
   
contact
Pagetop