javascriptデバッグのDOMブレークポイントデバッグ法を使ってテクニックを分かち合います。


ある学生はソースコードを使って検索できると言います。確かに、比較的簡単なページに対しては、この方法がよく効きます。しかし、比較的複雑なページ構成(例えば、ページに多くのスクリプトファイルやセグメントが埋め込まれており、対象に向けた大きなセグメントの実現、実現コードが隠されている)については、探しにくくなる可能性があります。
Javascriptデバッグでは、ブレークポイントデバッグによく使われます。実際には、DOM構造のデバッグにおいても、ブレークポイント法を用いることができます。これがDOM Breakpoint(DOMブレークポイント)です。
具体的な使い方:
1.Chromeブラウザで開発者ツールを開き、まずページ要素を選択し、マウスの右ボタンをクリックしてメニューの「Break on」をクリックします。ページを更新します。要素の属性が変化すると、スクリプトの実行を停止し、変更が発生した場所に位置します。
2.firebugをインストールしたFirefoxブラウザで、firebugを開いて、「HTML」タブに切り替え、監視が必要なDOM元素を選択し、マウス右ボタンをクリックし、メニューの「属性変更時に中断する」にチェックします。このようにしてHTMLのブレークポイントを追加することに成功しました。ページを更新すると、firebugもこの要素の属性を変更するコードを特定してくれます。
DOM要素自体の属性変化を監視できるほか、ChromeおよびFirebugは、そのサブ要素の変化を監視し、いつ要素が削除されるかを監視することができる。