代码之家 › 专栏 › 技术社区 › Jacksonkr

Chrome profiling-如何缩小发生的情况?

google-chrome-devtools javascript

Jacksonkr · 技术社区 · 7 年前

脚本

我正在对wordpress插件(tagdivcomposer)进行自定义添加。使用tagDiv Composer时,我可以单击页面左侧的元素和检查面板。必须有已调度的事件/某些正在运行的代码才能显示面板。

问题

使用Chrome开发工具,我如何准确地看到单击元素后运行的代码?

笔记

我已记录(分析)单击导致检查窗口打开的元素。我希望对这种情况进行反向工程,以便找到启动流程的事件/代码。

2 回复 | 直到 7 年前

Kayce Basques 7 年前

性能概要文件无疑是实现这一目标的一种方法,但DevTools也有 Event Listener Breakpoints 它允许您在事件侦听器启动时暂停。从那里你可以一步一步地浏览代码,一次一行。在这种情况下,您需要启用点击下的复选框老鼠类别,然后单击文本以触发事件侦听器。

Community c0D3l0g1c 4 年前

以下是我如何“解决”我的问题:

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

单击“单击此处”文本,将调度一个事件
听到该事件后 #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 代码被触发。使用此模式,我们可以看到堆栈按时间顺序向下移动,新进程按时间顺序从左向右移动。

我不是百分之百了解颜色代码,也无法在网上找到太多帮助。

推荐文章

João Otero · 我在这个Javascript数组行为中遗漏了什么?[副本]

2 年前

darwhite · Dom未在web浏览器for web中显示所有内容。WhatsAppcom[关闭]

2 年前

Felkru · 为什么我的内容在devtools响应大小中没有完全填满

2 年前

edjm · 如何使用浏览器调试器控制台窗口显示箭头函数=>{…}房产?

2 年前

ioliano · 是否有可能像Chrome开发者网络一样在android中嗅探请求?

6 年前

Hamdi Alp · 镀铬。存储同步设置和获取失败

6 年前

toshi · 如何安装debuggerWorker。反应本机调试器上的js?

6 年前

Oak · 我可以从devtools控制台截图吗?

6 年前

Stephan Ahlf · 如何找出触发HTML导航的位置

6 年前

VELFR · 如何在使用Papa解析框架将CSV文件转换为JSON时处理“未定义”错误?

6 年前