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

この記事が気に入ったら「いいね!」しよう

  • follow us in feedly Feedlyで最新記事を購読
  • Twitterで更新情報を1番にゲット!
  • LINEで楽しくトークしましょう!(スマホでLINEを起動 > その他 > 友だち追加 > QRコード)

この記事に関連するまとめ

19件のコメント

この記事にコメントする

投稿内容を確認し、問題がなければ下記の「コメントを投稿する」ボタンを押してください。