cinema-days 映画な日々

Firebug

2010/05/29
Firebug
管理人は通常作業にはブラウザとして「IE8」を使用している。
画面構成を確認する為、「Mozilla Firefox」「Google Chrome」も偶に見る。

その環境でデバッガとしてエラーチェックには、
Companion.JS + Microsoft Script Debugger を使用

今回、初めてFirefoxのアドオンでデバック出来る強力ツール
「Firebug」があると聞き、試用してみる事にした。

インストール先 ⇒ こちら
【スポンサーリンク】
[Mozilla Firefox でのチェック方法]
Firebug は Firefox のアドオンで、WebページのHTML/CSS/JavaScriptを
リアルタイムで編集、デバック出来る強力ツールだそうで、
Firebug を使う為だけに FireFox をインストールする人もいるほど。

FirebugにHTML/CSSのリファレンスを追加出来るアドオン
「CodeBurner」 (旧firescope)もある。

インストール先 ⇒ こちら

[便利な機能]
□ 要素を調査(要素を表示)
 選択した箇所のCSSを表示
 ・ セレクタのカスケード(継承)
 ・ プロパティの有効・無効
 ※CSSを設定したのに反映されない場合の確認に役立つ
 参考サイト:Firebug の使い方:(X)HTML と CSS の確認・修正方法のまとめ

□ ボトルネックの発見
 以前、「site24x7」を使った速度計測を紹介しましたが
 要素ごとに、読み込みにかかった時間を棒グラフとして表示する事が出来ます。
 参考サイト:Firebug 1.3 レビュー ~ Webサイト構築に必須のHTML/JavaScriptデバッガ

これでチェックしたら、Googleアドセンスの「DoubleClickのクッキー」
見事に引っ掛かり、「Bad Request」としてレッド表示された。
原因となるドメインは「googleads.g.doubleclick.net」で
これは、広告用トラッキングクッキーをオプトアウト(無効化)する
Firefoxアドオン「Targeted Advertising Cookie Opt-Out (TACO)」を
インストールする事により回避する事も出来るそうです。
参考サイト:ユーザーの嗜好を追跡する広告用トラッキングクッキーをオプトアウト(無効化)する

[Google Chrome でのチェック方法]
「DeveloperTools」を使用
起動方法
・ サイト上の適当な場所を右クリック後、「要素を検証」を選択
・ 編集したいWebサイトを表示させている状態で、「Ctrl+Shift+I」を押す
 
cinema-daysを「人気ブログランキング」で応援cinema-daysを「にほんブログ村」で応援
【パソコン】[フリーソフト]
関連記事
【スポンサーリンク】
同カテゴリ  【パソコン】[フリーソフト]

コメント歓迎!! 0

まだ、コメントはございません。

comment form

コメントは承認制です。コメントツールバーは利用できません。
【お名前・URL・コメント本文】欄の入力は必須になっております。

更  新  順
Hiro
Author: Hiro
発信地:愛知県
TB・CM(承認制)・LINK歓迎
cinemadays on X(旧Twitter)
cinemadays on Facebook