调试js事件小技巧
发表于|更新于
|浏览量:
万人都要将火熄灭,我一人独将此火高高举起。——海子
分享一个js调试事件小技巧
1 | <!DOCTYPE html> |
这里一个按钮,啥都没有
我们运行一下,给它在chrome console里添加事监听
1 | // 先用选中元素光标选一下按钮,这样$0就会指向按钮 |

这时候我们触发其任何事件都会有输出

针对某一事件的话就传入该事件
1 | monitorEvents($0, ["click"]) |

相关推荐
2023-09-11
css画一个圈带一条线
深窥自己的心,而后发觉一切的奇迹在你自己。——培根 用到的是css的background属性和radial-gradient 12345678910111213141516/** 淡蓝渲染到20px * 白色渲染到20px(分割线 * 白色渲染到21px(分割线 * 淡蓝渲染到21px * 淡蓝渲染到40px * 后续白色打底 */background: radial-gradient( circle at center, #f6faff 20px, #fff 20px, #fff 21px, #f6faff 21px, #f6faff 40px, #fff 0); 效果: .ruben{ background: radial-gradient( circle at center, #f6faff 20px, #fff 20px, #fff 21px, #f6faff 21px, #f6faff 40px...
2025-09-04
cat-catch
人之贤不肖譬如鼠矣,在所自处耳!――《李斯列传》 https://github.com/xifangczy/cat-catch 要说资源嗅探工具里最有名、最实用、最被广大网友熟知的,猫抓(cat-catch)绝对榜上有名。作为一款浏览器资源嗅探扩展,猫抓的定位就是帮你在当前网页上筛选、列出所有可见的资源链接,比如视频、音频、图片等,哪怕是隐藏得很深的媒体流都能一网打尽。支持Chrome、Edge、Firefox甚至Edge Android,安装方式极为简单,官方应用商店一键获取,也可以源码安装或crx手动安装,不论你是小白用户还是技术党都没障碍。 猫抓的界面非常直观,装好后在浏览器扩展区点一下,弹出的popup界面会自动检测当前页面的所有资源,按类型分类显示。比如你在视频网站,能看到.mp4/.m3u8/.flv等音视频流,常见的m3u8流还内置了解析器,可以直接复制下载链接,甚至还能用内置工具解析分段、拼接资源,方便你做后续处理。除此之外,猫抓也兼容各种流行网站的资源结构,日常追剧、下视频、扒站素材都能用得上。最贴心的是,猫抓所有数据都本地处理,不会收集...
2024-06-18
MutationObserver监听dom变化
人生意义到底是什么呢?吃得好一点,睡得好一点,多玩玩,不羡慕别人,不听管束,多储蓄人生经验,死而无憾,这就是最大的意义吧,一点也不复杂。—— 蔡澜《不如任性过生活》 mdn: MutationObserver.MutationObserver() - Web API | MDN MutationObserver.observe() - Web API | MDN 代码如下: 12345678910111213 let app = document.querySelector("#app")var observerOptions = { attributes: true, // 观察属性变动 childList: true, // 观察目标子节点的变化,是否有添加或删除 subtree: true // 观察后代节点,默认为false}// 创建一个DOM监听器,在DOM更新完成时触发let observer = new MutationObserver((mutationsList, obs...
2021-07-15
自定义鼠标
无息乌乎生,无绝乌乎续,无无乌乎有? ——明·宋应星《谈天·日说三》 我们可以使用CSS中的 1cursor: url(https://VampireAchao.github.io/imgs/mouse1.cur),auto; 去自定义我们的鼠标图片 这里后面的auto是如果前面鼠标图片失效时的备选方案 我们也可以改成default、pointer等等 甚至可以多个并存 1cursor: url(https://VampireAchao.github.io/imgs/mouse1.cur),url(https://VampireAchao.github.io/imgs/mouse2.cur),auto; 效果如下
2023-10-19
react-json-view
小不忍,则乱大谋。——孔子 分享一个react的json编辑器 https://github.com/mac-s-g/react-json-view 演示: RJV Demo
2025-08-12
cap
时穷节乃见,一一垂丹青。一一文天祥 https://capjs.js.org/ GitHub - tiagorangel1/cap: Cap is a lightweight, modern open-source CAPTCHA alternative using SHA-256 proof-of-work Cap:让互联网更安全的下一代轻量开源 CAPTCHA在数字时代,恶意机器人(bot)的攻击愈演愈烈,传统的 CAPTCHA(验证码)方案却不断被诟病:要么难用、臃肿,要么侵犯隐私、依赖巨头。有没有更现代、更轻量、更注重隐私和易用性的解决方案?今天为大家介绍一款令人眼前一亮的项目——Cap:一个基于 SHA-256 工作量证明(proof-of-work)、极致轻量且完全开源的全新 CAPTCHA 替代品。 Cap 是什么?Cap 由 tiagorangel1 开发,是一款现代化、轻量级的开源 CAPTCHA 替代方案,采用 SHA-256 工作量证明机制,主打快速、私密且极易集成。Cap 具备以下核心特性: 极致轻量:主前端库 @cap.js/widget...
