現在、Firebug を用いて自分以外の人が作ったコードを解析しております。

ただ、複数の JavaScript が複雑に入り組んでおり、
様々な個所が動的に変更されているために解析に非常に時間がかかっています。

そこでお伺いしたいのですが、Firebug に以下の機能はありますでしょうか?

1)指定したある CSS のスタイルが JavaScript から変更された場合にブレークする。
  例えば、ある要素の font-size が 24pt に設定された場合にブレークする、など。

2)HTML の「累積」タブにて最終的に適用されているスタイルが表示されていますが、
  JavaScript で指定されていた場合に、その原因となった行を表示する。
  (静的ものは確認できますが、動的なものは CSS タブで確認できないので)

3)あるページで読み込まれている、全ての JavaScript コードからの文字列の一括検索。
  例えば、24pt といった文字列で検索することで、スタイルの設定操作を行っている箇所を割り出したい。

また、最近では Chrome や IE にも優秀なデバッガが付属するようになったようですが、
他のツールでは上記のことはできるかご存知の方いらっしゃいますでしょうか。

よろしくお願いいたします。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2011/12/17 03:29:02
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:rouge_2008 No.2

回答回数595ベストアンサー獲得回数351

ポイント60pt

Google Chromeで1と3が可能でした。

1)右クリック→「要素を検証」で「Elements」を表示したら、コードの任意の要素を右クリックして「Break on attributes Modifications」にチェックを入れるといいです。
※「Break on subtree Modifications」にチェックを入れておくと、サブツリーに要素が追加・削除等の変更が行われた時にもブレークします。
※javascriptによって追加された要素のCSSの変更を対象にしたい場合は、要素が追加されている状態で「Break on attributes Modifications」にチェックを入れる必要があります。(※削除後に追加された同じHTML要素は対象外です。)

http://code.google.com/intl/ja/chrome/devtools/docs/scripts-breakpoints.html#dom

3)「Resources」を表示している状態で、右上の検索窓で検索すると、左ツリーの各ファイル名の右横に検索数が表示されます。(※エンターキーでファイルをまたいで該当行に飛びます。)


【追記】

3についてですが、Firebugで「スクリプト」タブを表示した状態で右上の検索窓で検索すると、該当数は表示されませんが、エンターキーでChromeと同じように各ファイルをまたいで該当行に移動します。
※入力欄にフォーカスするとダイアログが表示されますので、「複数ファイル」にチェックを入れてください。

id:quesit

なるほど、Chrome の機能でも大体似たようなことができるんですね。
Firebug についても調べていただいたようで、ありがとうございました。
Chrome の方はまだ試せていませんが、後日試してみます。
回答ありがとうございました!

2011/12/17 03:27:40

その他の回答1件)

id:Cherenkov No.1

回答回数1504ベストアンサー獲得回数493

ポイント40pt

1だけ。
HTMLタブにて要素を右クリックメニューから「属性変更時にブレーク」が使えそう。

id:quesit

おお、こういった機能があったんですね!
自分で触ってみた時には発見できていませんでした。
ありがとうございます。

2011/12/17 03:30:20
id:rouge_2008 No.2

回答回数595ベストアンサー獲得回数351ここでベストアンサー

ポイント60pt

Google Chromeで1と3が可能でした。

1)右クリック→「要素を検証」で「Elements」を表示したら、コードの任意の要素を右クリックして「Break on attributes Modifications」にチェックを入れるといいです。
※「Break on subtree Modifications」にチェックを入れておくと、サブツリーに要素が追加・削除等の変更が行われた時にもブレークします。
※javascriptによって追加された要素のCSSの変更を対象にしたい場合は、要素が追加されている状態で「Break on attributes Modifications」にチェックを入れる必要があります。(※削除後に追加された同じHTML要素は対象外です。)

http://code.google.com/intl/ja/chrome/devtools/docs/scripts-breakpoints.html#dom

3)「Resources」を表示している状態で、右上の検索窓で検索すると、左ツリーの各ファイル名の右横に検索数が表示されます。(※エンターキーでファイルをまたいで該当行に飛びます。)


【追記】

3についてですが、Firebugで「スクリプト」タブを表示した状態で右上の検索窓で検索すると、該当数は表示されませんが、エンターキーでChromeと同じように各ファイルをまたいで該当行に移動します。
※入力欄にフォーカスするとダイアログが表示されますので、「複数ファイル」にチェックを入れてください。

id:quesit

なるほど、Chrome の機能でも大体似たようなことができるんですね。
Firebug についても調べていただいたようで、ありがとうございました。
Chrome の方はまだ試せていませんが、後日試してみます。
回答ありがとうございました!

2011/12/17 03:27:40

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません