ブラウザのweb開発ツールを活用しよう

Web開発ツール

webを作ってサーバーにアップロードして、ブラウザで確認。もし表示が崩れていたり、スクリプトエラーが出ていたら、イチからその原因を探しだして修正してまたサーバーにアップロードして、ブラウザで確認。はい、とても面倒ですね。しかも、サーバー上に開発環境があれば良いですが、本番環境しかない場合はすでに公開状態にあると、せめて一刻も早くエラーを修正するためにエラー箇所の検討を付けたい・・・そんなことがあると思います。

そんなときには、ブラウザのweb開発ツールを活用してみましょう。

web開発ツールとは

web開発ツールができることは、エラーのチェック(JSや404エラーなど含む)、DOMインスペクター、ネットワークモニターなどです。
例えば画像が切れている場合、切れている画像のファイル名を表示してくれます。これはHTML上だけではなく、CSSファイルから背景などとして定義している画像に対しても同様に切れていた場合はエラーを出してくれます。具体的には、スタイルシートをカスタマイズするうちに何度も上書きを繰り返し、実際には影響がないけれども古い定義に残っていて切れている画像さえもエラー表示してくれます。

インスペクターは大変便利で、タグの親子関係などを表示するだけでなくタグやCSSの書き換えまでできます。もちろんこれはローカルPC上においてリロードするまでの間だけ有効なのですが、例えばインブラウザデザインをするときなども、とても有効です。

その他にも、クッキーの制御(削除や書き換え)をしたり、ネットワークモニターでは通信時間を確認して表示速度のボトルネックになっている原因を探ることも容易になります。

web開発ツールのインストール方法は?

現行バージョンのFirefoxやGoogle Chrome、Internet Explorerなどのブラウザでは、実は標準で開発ツールの機能を持っています。そのため、あらためてインストールする必要はありません。

Firefoxのアドオン「Firebug」が似たような機能として有名ですが、web開発ツールはブラウザ標準として持っている機能なので、インストールの手間がなく当然ブラウザとの互換性も問題がないので便利です。

普段使っているPCとは別のPCだったり、アドオンを入れられない環境で作業を行う場合などでも有効なので、ぜひ活用してみてはいかがでしょうか。

なお、web開発ツールの詳細は以下のページが参考になると思います。
http://www.atmarkit.co.jp/ait/articles/1407/11/news031.html