如何在Chrome DevTools中设置断点：监听select元素onchange事件

方法一：用浏览器调试器的事件断点 #

• 按F12或Ctrl+Shift+I打开浏览器开发者工具
• 切换到Sources（部分浏览器叫“调试器”）面板
• 在侧边栏找到Event Listener Breakpoints，展开DOM Events分类，勾选change事件
• 操作select元素触发onchange，代码会自动暂停在事件触发的调用栈位置，顺着调用栈往上追溯，就能找到具体执行的函数

方法二：手动添加debugger语句暂停执行 #

• 如果能直接修改代码，给select的事件处理逻辑里插入debugger;语句：
  • 若用HTML属性绑定：把<select onchange="handleChange()">改成<select onchange="debugger; handleChange()">
  • 若用addEventListener绑定：

  const selectElement = document.querySelector('select');
  selectElement.addEventListener('change', function(e) {
    debugger; // 插入这行，触发时自动暂停
    // 原有的事件处理逻辑
  });
  

• 打开开发者工具后触发onchange，代码会暂停，此时能直接查看当前执行的函数和调用栈

方法三：直接查看元素绑定的事件 #

• 在开发者工具Elements面板选中目标select元素
• 侧边栏切换到Event Listeners标签，找到并展开change事件
• 这里会列出所有绑定的处理函数，点击函数名就能跳转到对应的代码位置

内容的提问来源于stack exchange，提问作者RHOOP