Web製作に便利な各ブラウザごとの開発者ツールのまとめ

Web製作をする上で便利なブラウザの拡張機能が製作効率アップにつながります。
今回はブラウザごとのプラグインのご紹介をいたします。

Firefox

最も有名なプラグインのひとつですね。

リアルタイムDOM操作やページの読み込みにどこで時間がかかっているのかを調べることができます。

インストールすると、「ツール」⇒「Web開発」から表示・非表示を切り替えれます。

⇒Firebugのダウンロードはこちらから

 

こちらも有名なプラグイン。DOMの解析にとても役立ちます。

私が一番使うのが、スタイルの調査。「ツール」⇒「Web開発」⇒「調査」から表示することができ、任意の要素をクリックするとその要素の適応スタイルを見ることができます。

リアルタイムでの変更も可能です。

さらにWebサイトの任意の位置をドラック選択し「右クリック」⇒「選択した部分のソースを表示」とするとJavascriptが適応されたソースを見れます。

Javascriptを確認してどのようにソースが変更されたのかを確認できます。

大抵のWebサイトは携帯やスマホでアクセスした場合、UserAgentで判別して各キャリアごとのサイトにリダイレクトしております。

このプラグインはPCからでもUserAgentを偽装してスマホサイトをみるためのものです。

PCブラウザで見れればソースも確認できますのでWeb製作には必需品です。

⇒ダウンロードはこちらから

ダウンロードし、プラグインを追加してもスマホサイトのUserAgentは入っていないので、下記からXMLをダウンロードしてiphoneなどのユーザーエージェントを追加してください。

⇒ダウンロードはこちらから

 

Internet Explorer

IEでのWebデバッグは開発者ツールを使用するのが一番です。
「ツール」⇒「開発者ツール」より表示できます。(F12でも表示できます。)
基本的な機能としてはほかのブラウザと変わらないのですが、私がよく使用する機能は下記のようなもの

ブラウザモードの切り替えで昔のバージョンのIE表示をできる

IE7などの表示確認にはIE Testerが有名ですが、デフォルトの機能としても切り替えることができるので、ブラウザチェックに重宝しますね。(特にIE TesterはIE7のローカルファイルの起動が不安定なので)

スクリプトのデバッグができる

上記タブの「スクリプト」より「デバッグ」をクリックするとページが再読み込みされ、スクリプトのデバッグができます。
エラーがあれば処理が中断され、エラーが表示されるのでよく使用するかと思います。

 

Google Chrome

Firefoxでも紹介しましたFirebugです。拡張性の高いChomeでも一番役立つWeb製作支援ソフトと言えるでしょう

 インストールはこちらから

 

各ウェブサイトのコンテンツ・画像などの読み込みスピードを計測することができます。

インストールはこちらから

 

ちょっと長くなりましたので、次回続きを書いていこうかと思います。

よかったらいいねしてください(^o^)