人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

現在、Firebug を用いて自分以外の人が作ったコードを解析しております。
ただ、複数の JavaScript が複雑に入り組んでおり、
様々な個所が動的に変更されているために解析に非常に時間がかかっています。

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

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

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

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

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

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

●質問者: quesit
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Cherenkov
●40ポイント

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


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

2 ● rouge_2008
●60ポイント ベストアンサー

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と同じように各ファイルをまたいで該当行に移動します。
※入力欄にフォーカスするとダイアログが表示されますので、「複数ファイル」にチェックを入れてください。


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

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ