JavaScript 有没有浏览器工具能够调试 mouseover 等特效的?

yakjuly · 2012年06月12日 · 最后由 kfll 回复于 2012年06月12日 · 4608 次阅读

在做前段的时候有时候需要一个 tooltip 或者 bootstrap 的 hoverpop 之类的效果。 如果鼠标移上去发现 浮动位置不对,想切换到 firebug 或者 Chrome Tools 下看下样式。

但是每次鼠标移开 浮动层就不见了。 有没有一种工具能让当前 html 所有事件不响应的插件?这样点击事件 或者 鼠标事件的特效, 就可以很方便的调试了。

仔细看看 webkit 的开发工具,在右侧修改样式的地方可以选择元素当前状态

@willmouse 你是指 修改 element.style? 我指的是当你鼠标移动到一个帮助的连接上去,连接旁边弹出一个浮动层 上面写着一些描述。当你想用 firebug 看这个浮动层的结构时,鼠标移开了,浮动层的 div 也随着消失了,无法调试。

#2 楼 @yakjuly 仔细看最顶上的小图标 手机上的,没法给你弄图

chrome 上,在元素上点击右键,选择审查元素

@edokeh 哈哈,纠结的是 那个浮动 div 偏偏是跟随着鼠标的,并且有一点偏移距离的。并且是通过 dom 添加和删除来实现的。

还是要一点技巧,举个例子哈,比如 ruby-china 的头像旁边的这个浮动层

  • 先打开开发者工具
  • 鼠标移到你的头像上
  • 等层出来后,点右键选择审查元素
  • 在开发者工具里面慢慢找到浮动层的元素

主要技巧在第三步 因为点击右键的时候,鼠标脱离了文档,不会触发 mouseout,所以层不会消失 然后点击审查元素的时候,这个菜单项超出了浏览器文档窗口,所以点完之后,鼠标没有回到文档,不会触发文档里面的任何鼠标事件

给个图你应该能理解

注意审查元素这个菜单项超出了浏览器文档窗口

JS 中啥都是对象,而且弱类型,自动转化类型...所以你可以勇敢地console.log(Object),事件啥的都可以log

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册