スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Firefox を Firebug で 調査する方法

ブラウザの中にブラウザを開き、Firebug で 調査


一般には DOM Inspector で調査するのがスジでしょうが、
素人には敷居が高すぎるので Firebug で 調査します。


ロケーションバーに『 chrome://browser/content/browser.xul 』を入力して、
 
ブラウザの中にブラウザを開く。

chrome://browser/content/browser.xul

  
  ffbke001.png
▲ ショートカットを作っておけば便利


■ Firebug を有効にします。

  ffbke002s.png

■ Firebug で調査します。
調べたい要素をクリックするとHTMLパネルに ツリーノードが展開されます。


  ffbke003as.png

■ ノード上をカーソル移動させ周辺要素を調査

  ffbke004s.png

■ ○○をカーソル移動させ上位要素を調査

  ffbke005s.png

■ ○○の右クリックメニューから「CSSパスをコピー」

  ffbk007s.png

■ HTMLパネル選択状態の右クリックメニューから「CSSパスをコピー」

  ffbk006s.png




〚 右ペインタブ 〛

■ スタイル ⇒ ドロップダウンメニュー
:hover = マウスオーバー時の状態を調べたい時


  ffbk008s.png

■ レイアウト確認
マージンやパディングなどの情報が表示されます。
レイアウト上の各数字をクリックすると、値を変更することもできます。


  ffbk009s.png




■ CSS を開く
ルール宣言をコピー
スタイル宣言をコピー


  ffbk010s.png

■ CSS(browser.css)の表示

  ffbk011s.png

■ CSS ○○○

  ffbk012s.png

■ すべて選択 [Ctrl+A] ⇒ コピー

  ffbk013s.png

■ エディタに貼り付け 検索(↓例 urlbar 関連コードをすべて書き出し 分析します)

  ffbk014s.png




Firefox に browser.css を表示する方法

ロケーションバーに『 chrome://browser/content/browser.css 』を入力して
Firefox に browser.css を表示


chrome://browser/content/browser.css




関連記事
プロフィール

Author:zubolla
  
あ~
めんどくちゃい めんどくちゃい

全記事表示リンク

全ての記事を表示する

カテゴリ
検索フォーム
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。