iPhoneでデベロッパーツール(Webインスペクタ)を使う方法

ホームページのコーディングをする時、表示が崩れている箇所をすぐにチェック出来るデベロッパーツール。どこがおかしいのか簡単にチェック出来る上、CSSをブラウザ上で修正、コンソールなども確認出来る便利なツールですが、iPhone上でもこのデベロッパーツールを使うことが出来るのでその方法を紹介します。

1, iPhoneをMacにコネクタで接続、MacでSafari起動

まずiPhoneとMacをコネクタで接続します。
iPhone上でデベロッパーツールを使うと書きましたが、厳密には「iPhoneで確認しながらMacでデベロッパーツールを操作する」といった感じです。Safariではデベロッパーツールのことを「Webインスペクタ」と言います。Webインスペクタを使うのにMacのSafariを起動しておきます。

2, iPhoneのWebインスペクタを設定

デフォルトの設定ではiPhoneのWebインスペクタの設定はオフになっていますので、それをオンにします。
iPhoneの「設定」から「Safari」を選択。

Safariを選択

「Safari」の中の「詳細」を選択。

「Safari」の中の「詳細」を選択

「詳細」の中にある「Webインスペクタ」をオンにしてください。

Webインスペクタをオンに

「詳細」の中にある「Webインスペクタ」をオンにしてください。
これで設定は完了です。

3, MacのSafariからデバイスを選択

iPhoneの設定が完了したら、iPhoneのSafariでチェックしたいページを開きます。
開いた状態でMacのSafariのメニューから「開発」をクリックします(あらかじめ環境設定で「メニューバーに”開発”メニューを表示」にチェックを入れておいてください)

MacのSafariの設定

すると現在接続されているiPhone名が表示され、その中にiPhoneのSafariで開いているページのURLが表示されているはずです(iPhoneのSafariで別ウィンドウがある場合、それも一覧で表示されます)

4, デベロッパーツール(Webインスペクタ)起動

URLの中からチェックしたいページのURLをクリックするとWebインスペクタが起動します。

Webインスペクタ

ソースにカーソルを合わせるとiPhoneでも対象の要素が選択されます。

Webインスペクタ

Webインスペクタ

一個残念なのが要素のMacと違って要素から選択が出来ないということ、一つ一つ折りたたまれたソースを開けていくのはちょっと面倒。

でもこれでiPhoneでのCSSの調整や修正がかなり効率的になるのではないでしょうか。

ご不明な点があればお気軽にコメントください( ˘ω˘)

タイムチケットやってます!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


トラックバック:https://recost-design.com/2171.html/trackback