ウェブログ

8.その他のデベロッパーツールの紹介


デベロッパーツール入門

目次

サンプルサイトを用意しました:
デベロッパーツール用sample site

dev5_1-2

各ブラウザ毎のデベロッパーツール

今回はGoogleが提供するブラウザ、Chromeのデベロッパーツールを紹介しました。
他にも各ブラウザにデベロッパーツールがあり、基本的な使い方は似ていますがインターフェイスの違いや使い方が若干違います。

firefox

dev8_1-2

言わずと知れた「Firebug」。
感覚的には元祖デベロッパーツールという感じがします。最初はFirebugを使っていましたが、なんとなくChromeのデベロッパーツールの方が使いやすく感じ、いまは確認用です。
基本的な画面設計はChromeデベロッパーツールと変わらないです。こちらの方がタブが日本語表記に対応していたりして馴染みやすいのかもしれません。
dev8_2_030214_040108_PM

safari

dev8_3-2

Safariが提供するデベロッパーツール、「Webインスペクタ」。
インターフェイスがChromeやFirebugに比べてちょっと変わっています。これはなれればラクなのかもしれません。
個人的にはCSSの入力時にサジェスト用語の表示が若干遅かったり、値のあとのセミコロン「;」を自動入力してくれない、タブで移動するとちょっとやりづらいという点がありあまり使っていません。。。(とはいえ、つかわないといけない状況のときはしょうがないのでできるだけ慣れるようにしています)

Internet Explorer

Internet Explorerのデベロッパーツール、「F12開発者ツール」。
dev8_4_030214_040203_PM

IE11になってから全体的なデザインやインターフェイスが大きく変わりました。Windows8っぽい感じですね。

IEのバージョンごとの挙動の違いや不具合を発見するのに最適

今でこそあまり聞かなくなりましたが、ちょっと前までIE6,IE7対応というのはまだ多く、それにより工数がかさみどうしても再現できないレイアウトなど戸惑ったご経験は少なくないでしょう。
そんなときにIEの開発者ツールを使えばバージョン毎の確認が用意にできます。

IE11になってバージョン切り替えの設定場所が変更されました。
dev8_5_030214_035730_PM

スマートフォン用のsafariのデベロッパーツール

スマホ用のデバッグはMac用に限定されますが、SafariのWebインスペクタが使いやすいです。
USBでMacとつないだiPhoneで表示しているサイトをデベロッパーツールで操作することができます。リアルタイムに変更されるので崩れや修正の確認は非常に効率良くできます。

設定方法

1.iPhoneの設定→Safari→詳細→Webインスペクタを「オン」
IMG_7650

2.iPhoneとMacをUSBで接続し、Safariを起動。

3.Safariのツールバーの「開発」に自分のiPhoneが表示されるので、選択
dev8_6

4.通常のWebインスペクタと同じような画面が表示され、スマホ側で表示されているページのhtmlやcssを操作できる
dev8_7-2

このようにPC/スマホどちらも扱えるとちょっとした崩れはすぐに確認できるようになります。
Chromeのデベロッパーツールに慣れはじめたら、他のツールも使ってみることをオススメします。

この記事を書いた人

池田祐太郎

池田祐太郎

WordPress好きの池田です。Webの仕事の前はライブハウスでブッキングや音響をしてました。PHP, JavaScriptを自由に操りたいと思いつつ、つい訪れたサイトのソースコードを見てしまいます。


CONTACTお問い合わせ / お見積もり