浏览器调试小技巧

126 阅读1分钟

element-plus的级联选择器支持collapse-tags-tooltip属性,但是el-popper显示的样式有点问题,当鼠标移入时,会渲染出来这个元素,当想看看这个元素内部结构时,由于鼠标离开,它又消失了

image.png

现在,怎么才能调试这个元素呢?

  1. 先将el-popper-container中的el-popper元素删除

image.png

  1. 在控制台准备好这段代码,并将鼠标聚焦到控制台
const elPopper = document.querySelector('.el-popper');
if (elPopper) {
    document.body.appendChild(elPopper.cloneNode(true)); // 克隆并挂载到 body 下
}
  1. 鼠标移入到数字上,此时会生成一个el-popper元素,按下回车,此时el-popper会插入到body中,就可以愉快地查看内部结构了

image.png