你一定不知道的前端调试里的两个巨骚操作-易微帮

前言

前端只做两件事，分别是数据展示和用户交互。数据展示我们先不看，主要看看用户交互

用户交互是指用户使用鼠标、键盘等设备在页面上点击、双击、滚动等操作，改变数据状态，页面发生变化，用户看到页面变化。其中用户做的操作转化为软件行话是 DOM 事件操作，而 DOM 事件操作背后是一个个 JS 方法的调用

方法（函数）是状态变化的封装。理解函数体结构才能理解业务。那么开发人员快速找到方法（函数）定义也就能快速明白业务逻辑

本篇技术文章就是向大家介绍两种快速找到方法定义的办法

根据DOM事件监听转到方法定义

下面是非常简单的小例子

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>根据DOM事件监听转到方法定义</title>
  </head>
  <body>
    <button>click</button>
  </body>
</html>

<script>
  const oBtn = document.querySelector("button");

  oBtn.addEventListener("click", handler);

  function handler() {
    console.log("click it");
  }
</script>

将上面的代码运行在 Chrome 浏览器中，打开开发者选项

光标选中 button DOM 元素，然后打开 Console 面板

输入 getEventListeners($0) 然后点击回车键，console 输出 button 元素上绑定的事件，将对象逐层展开，可以看到 button 上绑定的方法名和方法的位置（[[FunctionLocation]]），点击 [[FunctionLocation]] 后面的链接，可以跳转到 handler 函数定义的地方

在 Source 面板中，可以看到 handler 函数声明的位置，阅读 handler 函数体的代码，就能明白对应的业务逻辑

根据断点转到方法定义

我相信现在的前端开发开发新项目的时候，基本上都会选择 React 或 Vue 等前端框架，而不是原生 JS 开发。当你们使用上面的办法去找函数定义的位置时会发现根本找不到或者只找到 noop 方法（React 中）。因为 React、Vue 甚至其他前端框架对事件做了封装，不那么轻易找到函数定义的地方，那么我们可以根据断点找到函数定义

利用 Vite 在本地启动一个简单的 React 小项目，主要的测试代码如下

// App.jsx

function App() {
  const handleClick = () => {
    console.log("click it");
  };

  return (
    <div>
      <button onClick={handleClick}>click</button>
    </div>
  );
}

export default App;