iOS6のリモートWebインスペクタ

iPhone5が販売されて、それに合わせてiOS6がリリースされました。ちょっとアップデートは様子見をしようと思っていたのですが、iOS6のリモートWebインスペクタが気になったので検証用のiPhoneのiOSバージョンを4.3から一気に6にアップデートしました。

iOS6のリモートWebインスペクタの使い方

iPhoneの設定

iPhoneの設定→Safari→詳細でWebインスペクタをオンにします。

WebインスペクタをオンにしたらSafari6がインストールされているMacとケーブルで繋ぎます。

ちなみにiOS6ではこれまであったデバッグコンソールがなくなってるのでWindowsの人はアップデートしないほうがいいかも。

Macの設定

Safariを立ち上げて開発メニューから「WebKit Webインスペクタを使用」にチェックを入れます。

iPhoneのSafariで検証したいWebサイトを開きます。そうすると「◯◯のiPhone」から現在開いているWebサイトを選択できます。

ここから検証したいサイトをクリックするとリモートWebインスペクタが起動します。

ざっくりと検証してみたところ、HTMLやCSSの検証デバッグやJSのデバッグなどWebインスペクタの機能をちゃんと利用できるという感じでした。

これだけ便利だとスマホ制作にはMacが必須になりそうですね。

関連エントリー

My IP Addressを購入
Proxyデバッグソフト「Charles」がすごい
iOSシミュレータでWebインスペクタが利用できる「iWebInspector」
Google PageSpeed Insights でパフォーマンスチューニング
IEなどすべてのブラウザで使えるCSSデバッガー「Firebug Lite」

スポンサードリンク

• 2012年9月21日 11:06
• カテゴリー iPhone

«RSSのURLを変更しました | メイン | 10月6日にスマートフォンサイト制作実践講座を行ないます。»

to-Rについて

JavaScriptやCSS、React/Angularなどのフロントエンド情報を発信しています。

書いてる人

西畑一馬 (株式会社トゥーアール)
代表取締役/フロントエンドエンジニア

株式会社トゥーアールについて

渋谷にあるフロントエンドに特化したWeb制作会社です。フロントエンドの実装についてお困りの事がありましたらお気軽にご相談ください。
株式会社トゥーアールへのお問い合わせ

検索

著書

Web制作の現場で使う
jQueryデザイン入門
[改訂新版]

JavaScript
コーディング
ベストプラクティス

スポンサードリンク

カテゴリー

• AWS [4]
• React [5]
• Angular [5]
• TypeScript [1]
• JavaScript [130]
• jQuery [59]
• CSS [95]
• HTML [19]
• iPhone [20]
• Android [31]
• Movable Type [72]
• WordPress [11]
• Facebook [6]
• Google [20]
• PHP [43]
• SEO [62]
• SEM [11]
• writer [108]
• seminar [107]
• Mac [7]
• server [15]
• Firefox [22]
• direction [7]
• tools [72]
• design [26]
• works [9]
• books [88]
• dialy [84]

アーカイブ

• 2021年11月 [3]
• 2021年10月 [2]
• 2021年5月 [1]
• 2020年5月 [1]
• 2020年1月 [3]
• 2019年5月 [4]
• 2019年4月 [1]
• 2019年1月 [1]
• 2018年12月 [1]
• 2018年7月 [1]
• 2018年3月 [2]
• 2021年 [6]
• 2020年 [4]
• 2019年 [6]
• 2018年 [5]
• 2017年 [11]
• 2016年 [15]
• 2015年 [44]
• 2014年 [41]
• 2013年 [62]
• 2012年 [66]
• 2011年 [100]
• 2010年 [85]
• 2009年 [96]
• 2008年 [149]
• 2007年 [213]
• 2006年 [143]
• 2005年 [66]

最近のエントリー

• AWS CloudFrontで特定ディレクトリを別のS3ストレージを割り当てる
• Nuxt.js / Next.jsで作成したサイトをGitHub ActionsでAWS S3にデプロイする
• AWS CloudFront FunctionsでBasic認証を設定する
• AWS SAM のtemplate.yamlをdeploy環境ごとに切り替える
• AWS Lambda(Node.js)でJimpを使って画像のバリデーションを行う
• IE11が終わる日
• 自宅ネットワーク高速化の道のり
• もう、SP用のWebデザインを倍の解像度で作るのをやめよう
• ReactのuseRefを再描画がかからないState管理として利用する
• TypeScriptのインデックス シグネチャでオブジェクトのキーの型を指定する

© 2005 to-R some Rights Reserved.