Chrome调试专用的函数有哪些

　　介绍

小编给大家分享一下铬调试专用的函数有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

在Chrome的DevTools中的控制台提供了一些调试专用的函数,每一个都身怀绝技。

控制台实用函数

这些函数只能用在Chrome的控制台中。当我在第一次看到这些函数时非常兴奋,把它们直接写到了自己的代码中,结果当然是跳出了各种<代码>未捕获ReferenceError: xxx没有定义>

<代码> $ _

<代码> _ 美元会存储的执行结果,在控制台测试JavaScript的时候通常都需要逐步确认,这正是<代码> _ 的美元用武之地:

Chrome调试专用的函数有哪些

在遇到不能链式调用的函数时可以用<代码> _ 美元来避免游标被修改:

Chrome调试专用的函数有哪些

顺带提一句,将来也有可能会出现管道运营商来做到任意的函数链接,一次来促进提升性或避免修改内建原型。

let ; 　　a =1 　　|才能祝辞,((n),=祝辞,添加(n,, 5)) 　　|才能祝辞,双; 　　 　　console.log (a),,//, 12

<代码> $,$ $

<代码>美元(选择器[、元素]),<代码> $ $(选择器[、元素])

<代码> $ 和<代码> $ $ 分别就是<代码>文档。querySelector 和<代码>文档。querySelectorAll>

第二个参数可以传入起始的元素,搭配<代码> 0 代码就可以先检验一个元素,然后再从它开始搜寻。

美元(& # 39;.btn& # 39;,, 0美元)

我经常用<代码> $ $>

Chrome调试专用的函数有哪些

不过如果已经把JQuery引入为<代码> 美元的话,还是会正常执行JQuery的。

调试

<代码>调试(函数)

参数为一个函数,只要执行到该函数就会触发调试器,可以用<代码> undebug (fn) 来取消:

function 一个(),{ 　　console.log才能(1); 　　} 　　 　　调试(a);//,undebug (a),

其效果相当于:

function 一个(),{ 　　console.log才能(1); 　　} 　　a =,(()函数,{ 　　const 才能;origin =,, 　　return 才能;函数(),{ 　　,,,调试器; 　　,,,的起源(); 　　,,} 　　})();

监控

<代码>监控(函数)

用法和<代码> 调试类似,<代码>监控> unmonitor(函数)来停止,不过不能用于箭头函数,如果要监听箭头函数的执行就只能手动重写了。

monitorEvents

<代码> monitorEvents(元素[,eventType])

可以监听并输出元素的特定事件,比较特别的是除了能监听单个事件,还能监听事件类型,例如输出<代码> 窗口的点击事件和所有<代码> 类联系别的事件:

效果和以下JavaScript相同:

window.addEventListener(& # 39;点击# 39;,,console.log) 　　window.addEventListener (& # 39; touchstart& # 39;,, console.log) 　　window.addEventListener (& # 39; touchmove& # 39;,, console.log) 　　window.addEventListener (& # 39; touchend& # 39;,, console.log) 　　window.addEventListener (& # 39; touchcancel& # 39;,, console.log)

可以用<代码> unmonitorEvents(元素[,eventType]) 来停止监听。

getEventListeners

<代码> getEventListeners(元素)

输出已注册在元素上的监听器,就拿刚才的例子来说,输入<代码> monitorEvents(元素)> getEventListeners(元素)>

Chrome调试专用的函数有哪些

展开的话可以看到监听器的各种属性:

<李>

侦听器:触发事件执行的函数

<李>

:该监听器只会触发一次

<李>

被动:无法执行event.preventDefault(),通常用于提升监听器的性能,如

Chrome调试专用的函数有哪些