iPhoneやiPadでページを見ながらウェブデバッグが可能に!iOS 6から搭載された「Webインスペクタ」が超絶便利!

Macbook iphone 【img via iOS 5.1 Update. by MJ/TR (´・ω・)

iPhoneやiPad向けにウェブ制作をしている人は知らないと損!

最近頻繁にgori.meのチューニングを行なっているのだが、iPadで見ると崩れてしまう表示を長らく修正できずにいた。というのも、Macで見るとどのブラウザでも問題なく表示されていたから。

そんなところに先輩が「Safariのウェブインスペクタを使うと良いよ」と。基本的にGoogle Chromeで開発をしている僕としては「なぜわざわざSafari?」と思っていたが、iOS 6搭載端末を繋げるだけでSafariのウェブインスペクタはGoogle Chromeの何倍も便利になる。iOS 6からの新しい機能で、iPhoneやiPadでページを見ながら直接ウェブデバッグができるのだ!!


そもそも「Webインスペクタ」って何?

そもそもWebインスペクタとは、Google ChromeやSafariに搭載されているデバッグ機能。表示されているページのHTML、CSS、Javascriptの内容を確認して修正することができる、ウェブ開発をしている人であれば一度は使ったことがあるであろう開発ツールだ。

ウェブインスペクタの設定方法

Appleらしく、使い方も超絶に簡単。

  1. iOSデバイス側で「Webインスペクタ」を有効にする
  2. Macに繋げる(Windowsは非対応)
  3. Mac側でインスペクタを開く

たったのこれだけだ!

iPhone/iPod touch/iPadの設定

iOSの設定は設定アプリの中の「Safari」を開き、一番下にある「詳細」をタップ。
Safari Web Inspector
「Webインスペクタ」という項目があるので、それをオンにする。
Safari Web Inspector

Safariの開発メニューを有効化しておく!

MacのSafari側でも開発メニューを有効化する必要がある。まだしていない人はSafariの環境設定の「詳細」タブからオンにしよう。
Safari web inspector

Webインスペクタの使い方

準備ができたところで早速使ってみる!使い方は以下の通り!

  1. デバッグしたいウェブページをiOSデバイスのSafariで表示
  2. iOSデバイスをMacとケーブルで接続する
  3. MacのSafariにある「開発」メニューに接続したiOSデバイスのデバイス名が表示されていることを確認する
  4. 接続したiOSデバイスにカーソルを合わせるとiOSデバイスで表示しているページタイトルが表示されるはず
  5. デバッグしたいページをクリックしてデバッグ開始!

成功するとこのようにiPhoneやiPadに表示されているソースを確認しながらデバッグが可能になる!便利すぎる!
Safari Web Inspector
Safari Web Inspector
iOS 6からの機能なので既に知っている人もいるかもしれないが、ユーザーエージェント偽造より確実にデバッグができてかなり便利だ!お陰様で修正できずにいた点も一瞬にして解決した!

使ったことがない人は是非お試しあれ!!

(via YoheiM .NET

macbook_iphone.jpg

gori.meの最新情報をチェック!!

  1. Redmi-note-4.png
    Xiaomi、10コアのCPUと4,100mAhのバッテリーを搭載した135ドルの「Redmi Note 4」を発表
  2. iPhone7-Concept-2.jpg
    2017年発売の新型iPhone、ホームボタンが廃止される見通し
  3. delete-iphone-else-top.jpg
    【保存版】iPhoneのストレージ容量不足を劇的に解消する7つの方法
  4. duo-PR-launch-screens_0003_screen-4-1.png
    Google Duo、リリース後1週間で500万ダウンロードを突破
  5. Train-Gateway.jpg
    「iPhone 7」、やはり「おサイフケータイ」に対応か?!