element-plus 的一些调试方法

有时候需要调试下拉菜单里面的内容或者样式,默认是 blur 事件。鼠标移动到调试面板,下拉列表就消失了,很麻烦

推荐个方法,浏览器控制台,删掉 mouseleave 事件

但有时候,删掉了 mouseleave 事件,但可能还会有别的地方有其他事件导致消失,有个办法,直接加 display: block

如果你还是觉得麻烦,那就先把鼠标移动到调试面板内,然后直接系统截图,然后再取消截图,鼠标移开的事件也是不会触发的

调试源码

如何调试 element 源码?

直接点开Sources -> Page -> packages 找到对应的目录,这里还是用 dropdown 组件为示范

不需要什么下载 element 源码,也不需要编译 sourcemap 之类的, 编译过的都知道,要指定 node 版本,等等一系列花费时间的前置操作

如何调试本地的业务代码?

vite、vue-cli创建的项目,直接在代码处写上 debugger ,然后刷新浏览器就能断点了

相关推荐
Cutecat_14 小时前
视频字幕处理工具横向:提取模式 vs 编辑模式,该如何选择
android·前端·ios·语音识别
dsyyyyy110114 小时前
JavaScript变量
开发语言·javascript·ecmascript
qq_4221525715 小时前
PDF 加水印工具怎么选?2026 年文档版权保护方案对比
前端·pdf·github
kyriewen15 小时前
手写 Promise.all、race、any:不到 30 行代码,解决并发异步的所有姿势
前端·javascript·面试
brucelee18616 小时前
OpenClaw 浏览器控制(Chrome MCP)完整教程
前端·chrome
ct97816 小时前
React 状态管理方案深度对比
开发语言·前端·react
胡志辉的博客16 小时前
深入浅出理解浏览器事件循环:从一道输出题讲到 Chrome 源码
前端·javascript·chrome·chromium·event loop
代码不加糖16 小时前
js中不会冒泡的事件有哪些?
前端·javascript·vue.js
懂懂tty16 小时前
Vue2与Vue3之间API差异
前端·javascript·vue.js
AI焦点17 小时前
跨越协议鸿沟:Tool Use状态机从Anthropic到OpenAI兼容体系的适配要点
前端·人工智能