修正する JavaScript がたくさんある非常に複雑なページがあります。これには多くの関数が含まれており、Raphael JS オブジェクトをドラッグするとトリガーされる特定の関数を 1 つ見つける必要があります。私はそれがどれなのか分かりません。「今すぐ」実行されているものをコンソールに記録する可能性はありますか? 出力が乱雑になることはわかっていますが、マウスでオブジェクトをつかむと何が起こるかを見る機会が得られます。
3 に答える
その瞬間に JavaScript が実行されている場合、開発者ツールの [ソース] タブにある [一時停止] アイコンを押すと、スクリプトが停止し、コール スタックが表示されます。
特定のイベント リスナーが発生したときに何が起こるかをデバッグしたい場合 (たとえば、ドラッグ アンド ドロップ スクリプトで)、ページ要素を右クリックし、[要素の検査] を選択してから、 [要素] タブで、一番下までスクロールして、その要素に関連付けられているイベント リスナーを表示します。特定のリスナーをクリックすると、そのリスナーのスクリプト ソースが表示され、その時点でブレークポイントを追加できる場合があります。(コンパイルされたスクリプトがこれを理解するのを難しくする可能性があることに注意してください)
自分のページでもサードパーティのページでも、ページの問題を調査するときの1つの秘訣は、ボタンを押すなどで起動すると思われるスクリプトにブレークポイントを自由に振りかけることです。次に、開発者ツールを開いた状態でページを操作して、ブレークポイントがブレークポイントに到達するとデバッグが停止します。
独自のコードである場合のその他のトリックは、console.log
アクティビティをコンソールに記録するステートメントを使用するか、またはdebugger
(ソフトウェア ブレークポイントのようなもの) を使用することです。そしてもちろん、alert
ステートメントを生成する昔ながらのダイアログ ボックスも今でも役に立ちます。
私は間違っているかもしれませんが、手動で console.log() を使用してブラウザ コンソールに書き込む必要があります。
やってみました :
console.log(yourObject)
yourObject はドラッグ可能な要素ですか?
新しい chrome コンソールでは、詳細なオブジェクト ブラウジングがあり、オブジェクト プロトタイプで必要なものを見つけることができるかもしれません。