Javascript Chrome评测-如何缩小发生的范围？
场景 我正在对wordpress插件（tagdivcomposer）进行自定义添加。使用tagDiv Composer时，我可以单击页面左侧的元素和检查面板显示。必须有已调度的事件/正在运行的某些代码才能显示面板 问题 使用Chrome开发者工具，我怎样才能准确地看到单击元素后运行的代码 注释 我已记录（分析）单击导致检查窗口打开的元素。我希望对这种情况进行反向工程，以便找到启动流程的事件/代码 以下是我如何“解决”我的问题： 我设置了一个本地测试，并对其进行了分析，以查看到底发生了什么Javascript Chrome评测-如何缩小发生的范围？,javascript,google-chrome-devtools,Javascript,Google Chrome Devtools,场景 我正在对wordpress插件（tagdivcomposer）进行自定义添加。使用tagDiv Composer时，我可以单击页面左侧的元素和检查面板显示。必须有已调度的事件/正在运行的某些代码才能显示面板 问题 使用Chrome开发者工具，我怎样才能准确地看到单击元素后运行的代码 注释 我已记录（分析）单击导致检查窗口打开的元素。我希望对这种情况进行反向工程，以便找到启动流程的事件/代码 以下是我如何“解决”我的问题： 我设置了一个本地测试，并对其进行了分析，以查看到底发生了什么 单击
- 单击“单击此处”文本，将发送一个事件
- 将听到该事件，并在
中添加了类#框绿色
<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>
window.onload=函数（）{
var BOX\u CLICK=“BOX CLICK”；
document.getElementById（“单击此处”）.onclick=function（）{
dispatchEvent（新事件（单击框））；
console.log（“单击”，此项）；
}
window.addEventListener（单击框，函数（）{
log（“侦听器”，this）；
document.getElementById（“框”）.classList.add（“绿色”）；
});
}
#盒子{
宽度：100px；
高度：100px；
背景色：黑色；
}
格林先生{
背景色：绿色！重要；
}
单击此处
dispatchEvent（匿名）监听器我对颜色代码没有100%的了解，也无法在网上找到太多帮助。性能配置文件肯定是一种方法，但DevTools还有一种功能，可以让您在事件侦听器启动时暂停。从那里你可以一步一步地浏览代码，一次一行。在这种情况下，您需要启用鼠标类别下的单击复选框，然后单击文本以触发事件侦听器。关于颜色编码，顶级事件的颜色编码与摘要选项卡相匹配。函数根据其脚本进行颜色编码。每个脚本都指定了一种颜色。每个函数都根据其源脚本进行颜色编码。因此，如果
foo（）bar（）