欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

chrome 事件监听器 有大用 有大大用 有大大大用

image.png


看看某个元素上发生了什么事 



需求场景 

在前端开发中,偶尔需要验证下某个元素上到底绑定了哪些事件,以及监控某个元素上的事件触发情况。

解决方案

普通操作

之前面对这种情况,一般采取的措施就是在各个事件里写console.info,然后进行点击等操作触发事件,或者在控制台trigger元素上的事件,或者dispatchEvent。

这种方法比较繁琐,而且假如触发这个事件之前需要做大量操作,触发时间后需要重新来过,真的是浪费时间啊。

神级操作

今天偶然发现借助Chrome控制台的命令行,可以简单快捷地解决这个问题。

获取事件信息命令: getEventListeners

看到本页面那个精灵球了吗,接下来我们获取那个精灵球上的事件信息。

Chrome控制台输入命令:

getEventListeners(document.querySelector(".diggit"))

  得到结果:

   

chrome控制台会输出一个事件信息数组,图中可以看出精灵球上有一个点击事件,useCapture为false表示这个事件是冒泡而不是捕获,once为false表示这个事件不会只监听一次,passive为 false表示这个事件是很普通的事件,浏览器的默认操作不会在另一个线程中进行。

展开listener:

  

里面还会展示事件将依次在哪些元素上冒泡触发。

 

监控元素上的事件命令: monitorEvents 和 unmonitorEvents

看名字就大概知道一个是监控事件,一个是取消监控事件。

那么同样监控一下那个精灵球:

monitorEvents(document.querySelector(".diggit"))

当我运行此命令行后,将鼠标再移动到精灵球上时,控制台很快输出了大量事件。

一般情况下,这并不是我们想要的,我们更多地时候可能只想要一两种事件。

那么我们先解除监控:

unmonitorEvents(document.querySelector(".diggit"))

然后可以只监控鼠标事件:

monitorEvents(document.querySelector(".diggit"),"mouse")

当然我们更常用的是只监控鼠标点击事件:

monitorEvents(document.querySelector(".diggit"),"click")

此时点击精灵球(你也点一下呗

现在我们可以更准确地获取到我们想要监控的事件信息了:

 所以说还是很有用的是吧,那么学到了的同时赶紧点击一下精灵球验证一下如何呢

来自  https://www.cnblogs.com/vvjiang/archive/2017/11/15/7836696.html



chrome console的使用: 监听特定类型的事件

作者: Arvin Chen 分类: Chrome 来源: Break易站(www.breakyizhan.com

Chrome DevTools命令行API提供了多种方式来观察和检查事件监听器。JavaScript在交互式页面中起着中心作用,并且浏览器为您提供了一些有用的工具来调试事件和事件处理程序。

TL;DR

  • 使用monitorEvents()监听某一类型的事件。

  • 使用unmonitorEvents()停止监听。

  • 使用getEventListeners()获取DOM元素的监听器。

  • 使用Event Listeners Inspector(事件监听检查器)面板获取有关事件监听器的信息。

监听事件

monitorEvents()方法指示DevTools记录指定目标事件的信息。

第一个参数是要监听的对象。如果未提供第二个参数,所有事件都会返回。要指定要监听的事件,传递一个字符串或字符串数组作为第二个参数。

监听页面body上的点击事件:

monitorEvents(document.body, "click");

如果监视的事件是支持的 事件类型(DevTools 映射到一组标准事件名称) ,那么该方法将监听该类型的事件。

命令行API 将事件类型完整映射到它们覆盖的事件中。

要停止监听事件,请调用unmonitorEvents()方法,传递一个停止监视对象的参数。

停止监听body对象上的事件:

unmonitorEvents(document.body);

查看在对象上注册事件监听器

getEventListeners() API返回在指定对象上注册事件的监听器。

返回值是一个对象,其中包含每个已注册事件类型的数组(例如,click 或 keydown)。 每个数组的成员都是对象,描述每中类型的已注册监听器。 例如,以下代码列出了在文档对象上所有已注册事件的监听器:

getEventListeners(document);

如果在指定对象上注册了多个监听器,那么该数组包含每个监听器成员。在以下示例中,在#scrollingList元素上为mousedown事件注册了两个事件监听器:

进一步展开每个对象,可以查看其属性:

查看在DOM元素上注册的事件监听器

默认情况下,Elements(元素)面板中的Event Listeners(事件侦听器)窗格显示附加到页面的所有事件:

过滤器可以限制显示只针对所选节点的事件:

通过扩展对象,该面板显示事件侦听器的详细信息。在这个例子中,页面有两个通过jQuery附加的事件监听器:

说明

翻译自:https://developers.google.com/web/tools/chrome-devtools/console/events

来自  https://www.breakyizhan.com/chromeconsole/1125.html



Chrome控制台的console详述

时间:2016-09-16 12:47:12      阅读:1005      评论:0      收藏:0      [点我收藏+]

标签:

Chrome控制台的console详述

     在详述之前让我们来看看打开浏览器控制台的方式都有那些吧,毕竟这才是开始。

要想打开谷歌开发者工具,有三种方式

  1. ctrl+shift+i

  2. f12

  3. 在网页中右击鼠标,点击【审查元素】,你会打开浏览器的开发者工具

技术分享

大家可以看到控制台里面有一首诗还有其它信息,如果想清空控制台,可以点击左上角那个技术分享来清空,当然也可以通过在控制台输入console.clear()来实现清空控制台信息。如下图所示

技术分享

现在假设一个场景,如果一个数组里面有成百上千的元素,但是你想知道每个元素具体的值,这时候想想如果你用alert那将是多惨的一件事情,因为alert阻断线程运行,你不点击alert框的确定按钮下一个alert就不会出现。

下面我们用console.log来替换,感受一下它的魅力。输入一下文字需要注意,在你点击换行时是不是直接运行了,在控制台换行使用shift + enter这个组合键

技术分享

看了上面这张图,是不是认识到log的强大之处了,下面我们来看看console里面具体提供了哪些方法可以供我们平时调试时使用。

技术分享

1、先说一下源码定位

大家打开测试网页   看到页面右下方有一个推荐的图标吗?右击推荐图标,选择审查元素,打开谷歌控制台,如下图所示

技术分享

我们现在想知道votePost方法到底在哪?跟着我这样做,在Console面板里面输入votePost然后回车

技术分享

直接点击上图标红的链接,控制台将定位到Sources面板中,展示如下图所示

技术分享

大家看了上面这个图片之后估计头都要晕了吧,这么多js都整在一行,让人怎么看呀,不用担心,按下图操作即可(也就是点击中间面板左下方的Pretty print就行了)

 

技术分享

这时我们再回到Console面板时会惊奇的发现原来的链接后面的1现在变成91了(其实这里的数字1或者91就是代表votePost方法在源码中的行号 )现在看出Pretty print按钮的强大之处了吧

知道了怎么样查看某一个按钮的源码,那接下来的工作便是调试了,调试第一步需要做的便是设置断点,其实设置断点很简单,点击一下上图所示的92即 可,这时你会发现92行号旁边会多了一个图标,这里解释一下为什么不在91处设置断点,你可以试下,事实上根本就没法在91处上设置断点,因为它是函数的 定义处,所以没法在此设置断点。

技术分享

 

设置好了断点后,你就会在右边Breakpoints方框里看到刚刚设置的断点。

我们先来介绍一下用到的调试快捷键吧(事实上我们也可以不用下表所示的快捷键,直接点击上图所示右侧栏最上层的一排按钮来进行调试,具体用哪个按钮,把鼠标放到按钮上方一会就会显示它相应的提示)

 

快捷键功能
F8恢复运行
F10步过,遇到自定义函数也当成一个语句执行,而不会进入函数内部
F11步入,遇到自定义函数就跟入到函数内部
Shift + F11步出,跳出当前自定义函数

其中值得一提的是,当我们点击“推荐”按钮进行调试的时候会发现,不管我们是按的F10进行调试还是按F11进行逐步调试,都没法进行$.ajax函数内部,即使我们在函数内部设置了断点也没有办法进入,这里按F8才是真正起效果的,不信你试试。

当我们在调试的时候,右侧Scope Variables里面会显示当前作用域以及他的父级作用域,以及闭包。你不仅能在右侧 Scope Variables(变量作用域) 一栏处看到当前变量,而且还能把鼠标直接移到任意变量上,就可以查看该变量的值。

用图说话(哈哈)

技术分享

刚刚我们介绍的只是在html里面能够看得到它绑定了onclick事件,这样我们就找到它绑定的js函数,如果它是在jQuery页面加载完成函数里面绑定的,这时候我们怎么知道它绑定的是哪个js函数呢,如果我们不知道绑定的js函数就更加不用说调试进去了

下面介绍一下如何查看,还是以刚刚那个测试网页为例子吧,但是这次我们来看“提交评论”作说明吧,

右击“提交评论”-->审核元素,我们可以清楚的看到在这个按钮上未绑定任何事件。在Console面板内输入如下代码

function lookEvents (elem) {
    return $.data ? $.data( elem, "events", undefined, true ) : $._data( elem, "events" );
}
var event = lookEvents($("#btn_comment_submit")[0]); // 获取绑定的事件

如下图所示:

技术分享

按照上述介绍的方法定位到具体的blog-common.js里面,找到postComment  然后一层层的找到具体的代码,再设置断点就好了。

最后介绍一下一个神器,很好用的debugger

如果你自己写的代码,你执行的时候想让它在某一处停下来,只要写上的debugger就好了,不信你试试!哈哈

谷歌控制台Elements面板

大家知道Elements面板最大的功能就是操作属性和修改html。这里我再说一些大家可能不太熟悉的特性, 

  • 拖拽节点, 调整顺序

  • 拖拽节点到编辑器

  • ctrl + z 撤销修改

这些功能是我觉得最有意思的,你们可以试试哦。

下面来具体说说几个复杂点的功能

查看元素上绑定的事情

  • 默认会列出 All Nodes, 这些包括代理绑定在该节点的父/祖父节点上的事件, 因为在在冒泡或捕获阶段会经过该节点

  • Selected Node Only 只会列出当前节点上绑定的事件

  • 每个事件会有对应的几个属性 handler, isAtribute, lineNumber, listenerBody, sourceName, type, useCapture

 

  • handler是处理函数, 右键可以看到这个函数定义的位置, 一般 js 库绑定事件会包一层, 所以这里很难找到对应handler

  • isAtribute 表明事件是否通过 html 属性(类似onClick)形式绑定的

  • useCapture 是 addEventListener 的第三个参数, 说明事件是以 冒泡 还是 捕获 顺序执行

技术分享

样式操作

可以通过 ctrl + z 取消

技术分享

总况

目前控制台方法和属性有:

["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear",
"getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"]

下面我们来一一介绍一下各个方法主要的用途。

一般情况下我们用来输入信息的方法主要是用到如下四个

console.log:用于输出普通信息

console.info:用于输出提示性信息

console.error:用于输出错误信息

console.warn:用于输出警示信息

console.debug:用于输出调试信息

用图来说话

技术分享

console对象的上面5种方法,都可以使用printf风格的占位符。不过,占位符的种类比较少,只支持字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)四种

技术分享

console.log("%d年%d月%d日",2011,3,26);
console.log("圆周率是%f",3.1415926);

%o占位符,可以用来查看一个对象内部情况

var dog = {};
dog.name = "大毛";
dog.color = "黄色";
console.log("%o", dog);

技术分享

下面重点说一下console.log的一些技巧

1、重写console.log 改变输出文字的样式

技术分享

而关于console.log,早已被玩儿坏了。一切都源于Chrome提供了这么一个API:第一个参数可以包含一些格式化的指令比如%c

比如给hello world 做件漂亮的嫁衣再拉出来见人:

console.log(‘%chello world‘,‘font-size:25px;color:red;‘);

技术分享

如果你觉得不够过瘾,那就把你能写出来的最华丽的CSS样式都应用上吧,比如渐变。于是你可以得到如下华丽丽的效果:

console.log(‘%chello world‘, ‘background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), 
color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2),
color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;‘);

技术分享

2、利用控制台输出图片

技术分享

 

console.dirxml:用来显示网页的某个节点(node)所包含的html/xml代码

技术分享
<body>
    <table id="mytable">
        <tr>
            <td>A</td>
            <td>A</td>
            <td>A</td>
        </tr>
        <tr>
            <td>bbb</td>
            <td>aaa</td>
            <td>ccc</td>
        </tr>
        <tr>
            <td>111</td>
            <td>333</td>
            <td>222</td>
        </tr>
    </table>
</body>
<script type="text/javascript">
    window.onload = function () {
        var mytable = document.getElementById(‘mytable‘);
        console.dirxml(mytable);
    }
</script>
技术分享

技术分享

console.group和console.groupEnd : >输出一组信息的开头和输出结束一组输出信息

看你需求选择不同的输出方法来使用,如果上述四个方法再配合group和groupEnd方法来一起使用就可以输入各种各样的不同形式的输出信息。

技术分享

console.assert : 对输入的表达式进行断言,只有表达式为false时,才输出相应的信息到控制台

技术分享

console.count : (这个方法非常实用哦)当你想统计代码被执行的次数

技术分享

console.dir : (这个方法是我经常使用的 可不知道比for in方便了多少) 直接将该DOM结点以DOM树的结构进行输出,可以详细查对象的方法发展等等

技术分享

console.time和console.timeEnd : 计时开始和计时结束(看了下面的图你瞬间就感受到它的厉害了)

技术分享

console.profile和console.profileEnd : 配合一起使用来查看CPU使用相关信息

技术分享

在Profiles面板里面查看就可以看到cpu相关使用信息

技术分享

console.timeLine和console.timeLineEnd : 配合一起记录一段时间轴

console.trace

堆栈跟踪相关的调试可以使用console.trace。这个同样可以通过UI界面完成。当代码被打断点后,可以在Call Stack面板中查看相关堆栈信息。

上面介绍的都是挂在window.console这个对象下面的方法,统称为Console API,接下来的这些方法确切地说应该叫命令,是Chrome内置提供,在控制台中使用的,他们统称为Command Line API

$

似乎美刀总是被程序员及各种编程语言所青睐「你看看PHP代码就知道PHPer有多爱钱了」,在Chrome的控制台里,$用处还真是蛮多且方便的。
$_命令返回最近一次表达式执行的结果,功能跟按向上的方向键再回车是一样的,但它可以做为一个变量使用在你接下来的表达式中:

2+2//回车,再
$_+1//回车得5

技术分享

上面的$_需要领悟其奥义才能使用得当,而$0~$4则代表了最近5个你选择过的DOM节点。
什么意思?在页面右击选择审查元素,然后在弹出来的DOM结点树上面随便点选,这些被点过的节点会被记录下来,而$0会返回最近一次点选的DOM结点,以此类推,$1返回的是上上次点选的DOM节点,最多保存了5个,如果不够5个,则返回undefined

技术分享

另外值得一赞的是,Chrome 控制台中原生支持类jQuery的选择器,也就是说你可以用$加上熟悉的css选择器来选择DOM节点,多么滴熟悉。

技术分享

$(selector)返回的是满足选择条件的首个DOM元素。
剥去她伪善的外衣,其实$(selector)是原生JavaScript document.querySelector() 的封装。
同时另一个命令$$(selector)返回的是所有满足选择条件的元素的一个集合,是对document.querySelectorAll()的封装。

技术分享

copy

通过此命令可以将在控制台获取到的内容复制到剪贴板(如果在elements面板中选中某个节点,也可以直接按ctrl+c执行复制操作)

技术分享

(哈哈 刚刚从控制台复制的body里面的html可以任意粘贴到哪 比如记事本 是不是觉得功能很强大)

 

keys和values

这是一对基友。前者返回传入对象所有属性名组成的数据,后者返回所有属性值组成的数组。具体请看下面的例子:

var tboy={name:‘wayou‘,gender:‘unknown‘,hobby:‘opposite to the gender‘};
keys(tboy);
values(tboy);

技术分享

console.table

技术分享

monitor & unmonitor

monitor(function),它接收一个函数名作为参数,比如function a,每次a被执行了,都会在控制台输出一条信息,里面包含了函数的名称a及执行时所传入的参数。

而unmonitor(function)便是用来停止这一监听。

技术分享

 

看了这张图,应该明白了,也就是说在monitor和unmonitor中间的代码,执行的时候会在控制台输出一条信息,里面包含了函数的名称a及执行时所传入的参数。当解除监视(也就是执行unmonitor时)就不再在控制台输出信息了。

 

Console.log样式

格式化符号实现的功能
%s格式化成字符串输出
%d or %i格式化成数值输出
%f格式化成浮点数输出
%o转化成展开的DOM元素输出
%O转化成JavaScript对象输出
%c把字符串按照你提供的样式格式化后输入

说了上面一堆公式,还是举个例子让你印象深刻一些,哈哈。

在控制台输入如下代码

技术分享
console.log("%c3D Text"," text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em");



console.log(‘%cRainbow Text ‘, ‘background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;‘);
技术分享

输出的结果如下图所示:

技术分享

 

这确实是一个很全的关于谷歌浏览器控制台中console的介绍。。里面加入了自己的一点操作。。。很好用

摘自:http://www.cnblogs.com/liyunhua/p/4529079.html#_label10

http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html

原文地址:http://www.cnblogs.com/y0da/p/5876161.html

来自 http://www.mamicode.com/info-detail-1533131.html

普通分类: