前端如何实现chrome inspector的功能？

Z时代
2024-01-10
分类：技术分享

移动到页面对应的区域点击，出现一个遮罩层，并弹出对应的元素详情:dom selector,marign,color等等
前端如何实现chrome inspector的功能？

目前想法：全局监听点击事件，获取坐标，通过document.elementFromPoint(x,y) 获取，但是只能获取某个坐标点的单个元素，结合它的父元素吗？

这种有没有现成的开源库供参考的？

其实不用取坐标，有现成的 mouseover 事件可以用……

document.addEventListener('mouseover', function(e) {
let el = e.target;
if (el && el.style) {
el._prevBackground = el.style.background;
el.style.background = 'yellow';
}
}, false);
document.addEventListener('mouseout', function(e) {
let el = e.target;
if (el && el.style) {
el.style.background = el._prevBackground;
}}, false);

打开开发者工具，直接拷贝粘贴上述代码，回车执行，然后鼠标在网页内动一动，有惊喜……