答案

Question

方案

我正在为wordpress插件（tagdivcomposer）添加自定义功能。使用tagDiv Composer时，我可以单击页面左侧的元素和检查面板显示。必须有一个事件已调度/正在运行的某些代码才能显示该面板。

问题

使用Chrome开发者工具，如何确切地查看点击元素后运行的代码？

备注

我已经记录（profiled）点击导致检查窗口打开的元素。我希望对这种情况进行逆向工程，以便找到启动该过程的事件/代码。

Answer 1

性能配置文件绝对是一种方法，但DevTools也有Event Listener Breakpoints，可以让你在事件监听器触发时暂停。从那里你可以逐步完成代码，一行一行。在这种情况下，您可以启用鼠标类别下的单击复选框，然后单击文本以触发事件侦听器。

Answer 2

这里是我如何解决的问题＆＃34;我的问题：

我设置了一个本地测试并对其进行了分析，以确切了解发生了什么。

点击＆＃34;点击此处＆＃34;发送文本和事件
听到了该事件，并且#box已添加了类green

<强>代码

<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。在其下方，您会看到(anonymous)，这是我的listener代码被触发的位置。使用这种模式，我们看到堆栈按时间顺序向下移动，新进程按时间顺序从左到右。

我不是100％的颜色代码，也不能在网上找到太多帮助。

Chrome分析 - 如何缩小发生的情况？

2 个答案:

答案