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

【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」を開き、一番下にある「詳細」をタップ。

「Webインスペクタ」という項目があるので、それをオンにする。

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

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

Webインスペクタの使い方

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

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

成功するとこのようにiPhoneやiPadに表示されているソースを確認しながらデバッグが可能になる！便利すぎる！

iOS 6からの機能なので既に知っている人もいるかもしれないが、ユーザーエージェント偽造より確実にデバッグができてかなり便利だ！お陰様で修正できずにいた点も一瞬にして解決した！

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

（via YoheiM .NET）