シナリオChromeのプロファイリング - どうしたのかを絞り込む方法
私はワードプレスのプラグイン（tagdivcomposer）にカスタムの追加を作ってるんです。 tagDiv Composerを使用する場合は、要素の左側をクリックして検査パネルの左側に表示することができます。ディスパッチされたイベント/パネルを表示するために実行中のコードがなければなりません。私が見ることができますどのようにChromeデベロッパーツールを使用して質問
は、正確にどのようなコードは、要素をクリックした後に走りましたか？
ノート
私は点検窓の開口部につながる要素をクリックする（プロファイル）を記録しています。状況をリバースエンジニアリングして、プロセスを開始しているイベント/コードを見つけることができるようにしたいと思います。
私は地元のテストを設定し、それが起こっていた正確に何を参照して、プロファイル：
パフォーマンスプロファイルは確かに一つの方法ですが、DevToolsにはEvent Listener Breakpointsもあり、イベントリスナーが起動するたびに一時停止できます。そこからコードを一度に1行ずつ進めることができます。この場合、をクリックしてマウスカテゴリのチェックボックスをオンにし、テキストをクリックしてイベントリスナーをトリガーします。
は、ここで私は私の問題を「解決」方法です。
#boxはが追加されたクラスを持っているコード
<html>
<head>
<script>
window.onload = function() {
var BOX_CLICK = "box click";
document.getElementById("click-here").onclick = function() {
window.dispatchEvent(new Event(BOX_CLICK));
console.log("click", this);
}
window.addEventListener(BOX_CLICK, function() {
console.log("listener", this);
document.getElementById("box").classList.add("green");
});
}
</script>
<style>
#box {
width:100px;
height:100px;
background-color: black;
}
.green {
background-color: green !important;
}
</style>
</head>
<body>
<p id="click-here">Click Here</p>
<div id="box"></div>
</body>
</html>
プロファイリング
あなたはイベントが送出されたときであるアイテムdispatchEventを見ることができます。私のlistenerコードがトリガーされている場所は、(anonymous)です。このパターンを使用すると、スタックが時系列的に下に移動し、新しいプロセスが時系列的に左から右に移動することがわかります。
私はカラーコードで100％ではなく、オンラインで多くのヘルプを見つけることはできません。
色分けに関しては、トップレベルのイベントは**要約**タブと一致するように色分けされています。関数はスクリプトに従って色分けされています。各スクリプトには色が割り当てられます。すべての機能は、それが由来するスクリプトに従って色分けされています。したがって 'foo（）'と 'bar（）'が同じ色ならば、同じスクリプトから来ていることを意味します。これは主に[メインスレッドの表示]（https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference#main）で説明されています。 –
私はあなたがgoogle devsビデオでそれを言及するまで、そのオプションを聞いたことはありませんでした。実際にはかなり役に立ちました。最近私はこれをたくさん使っています。この質問に対して、これは間違いなく最良の選択だと思います。 – randomguy04
ありがとう！参考動画はrandomguy04です：https://youtu.be/Eyw_mwbABIQ?t=3m38s –