Chrome6のデベロッパーツールはどこ?

Webアプリケーションを開発するにあたって、クライアントサイドスクリプトのデバッグをどうするかという問題は常につきまといます。FirefoxであればFirebugが定番ですが、ChromeやSafariにも優れたデバッガが付属しています。今回は、Chrome6のデバッグ機能について解説します。

Chrome6では、ブラウザのデザインが一新され、開発者メニューが今までの場所から移動しました。一度見つけてしまえば迷わないのですが、何処にあるか分からない人もいるかとおもいスクリーンショットを掲載しました。レンチマークのところから、ツール、デベロッパツールと辿ってください。

開発者メニューはここにある

開発者メニューはここにある

デベロッパツールを使うと、HTMLの構造やCSSを確認できます。また、ブラウザ上で、HTMLやスタイルシートを一時的に変更することもできます。

HTMLを確認

HTMLを確認

デベロッパツールを使うと、HTTPの通信を確認することができます。Request Headerの内容も、Response Headerの内容も一目瞭然です。

通信内容の確認

通信内容の確認

コンソールを表示すると、エラーや警告が一目瞭然。変数の値の確認や変更もできます。

コンソール

コンソール

弊社でも、これらの機能をつかってSmartBrainを開発しています。半年ほど前まではFirebugを主につかっていたのですが、最近では、Chromeのデバッグ機能とFirefoxのFirebugを半々ぐらいの割合で利用しています。もちろん、動作検証は、IE6、IE7、IE8でも行っております。

Facebookページもよろしくお願いします

CATEGORIES SmartBrain, 北海道ラボby.yasu.tanaka1 Comments2010.09.14
TAGS ,  
記事の投稿者
田中 康英
eラーニング支援部です。ときにメールマガジンを書き、ときにブログを書き、ときにソフトを翻訳し、ときに問い合わせに返信し、ときにUstreamスタジオの準備をし、とそんな感じでお仕事しています。

Facebook comments:

コメントをどうぞ

Eメールアドレスは公開されません。

Trackback URL

管理者の承認後に表示します。無関係な内容や、リンクだけで意見や感想のないものは承認しません。