Edge浏览器112版本开发者工具无法查看addEventListener事件

使用Microsoft Edge Version 112.0.1722.34（64位官方版）时，通过代码为元素绑定click事件监听器后，在开发者工具中无法看到该事件。相关代码如下：

JavaScript代码 #

let x = document.createElement('p');
x.style.background = "aqua";
x.textContent = ' Click inside the box to Change background color ';
x.id = "para1";
console.log(x);
document.body.appendChild(x);

function changeBackgroundColor(e) {
  e.target.style.background = "yellow";
}
document.getElementById("para1").addEventListener("click", changeBackgroundColor);

CSS代码 #

p {
  border: solid green 2px;
  margin-right: 65em;
  margin-top: 24px;
}

可以通过以下方式解决：

• 检查事件监听面板的显示设置
  打开开发者工具Elements面板的Event Listeners标签，确保勾选Ancestors选项，同时确认筛选框没有输入过滤词，避免事件被隐藏。

• 确认选中目标元素
  确保在Elements面板中选中的是#para1元素。可以在控制台执行document.getElementById('para1')，右键选择Reveal in Elements panel快速定位。

• 升级Edge浏览器版本
  Edge 112属于旧版本，可能存在工具bug，建议更新到最新稳定版，这类显示问题通常会在新版本中修复。

• 通过控制台直接查看监听器
  如果面板仍无法显示，在控制台执行以下代码，可直接查看元素的所有事件监听器：

  getEventListeners(document.getElementById('para1'))
  

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