Chrome的DevTools中的控制台提供了一些Debug特有的功能，各有千秋。控制台实用程序函数这些函数只能在Chrome的控制台中使用。第一次看到这些函数的时候非常激动，直接写到自己的代码中，当然跳出各种UncaughtReferenceError:xxxisnotdefined错误。$_$_中存储的执行结果通常需要在控制台测试JavaScript时逐步确认。这就是$_派上用场的地方：$_可以用来在遇到不能链式的函数时避免游标修改：顺便说一句，以后可能还会有一个Pipeline算子来做任意函数链式，一次促进提升或者避免修改内置原型。leta;a=1|>((n)=>add(n,5))|>double;console.log(a);//12$,$$$(selector[,element]),$$(selector[,element])$和$$分别是document.querySelector和document.querySelectorAll的缩写，来自大家熟知的JQuery。第二个参数可以传入起始元素。使用$0，您可以先检查一个元素，然后从它开始搜索。$('.btn',$0)我经常使用$$来快速测试诸如输出某人GitHub页面的所有存储库名称之类的事情：如果您将JQuery导入为$，它仍然可以正常工作。debugdebug(function)参数是一个函数，只要执行该函数就会触发调试器，可以用undebug(fn)取消：functiona(){console.log(1);}debug(a);//取消调试(a);效果等同于：functiona(){console.log(1);}a=(function(){constorigin=a;returnfunction(){debugger;origin();}})();monitormonitor(function)用法类似于调试。执行monitor函数时，会输出函数名和参数。它可以被unmonitor(function)停止，但不能用于箭头函数。如果要监控箭头函数的执行情况，只能手动重写。monitorEventsmonitorEvents(element[,eventType])可以监听并输出某个元素的特定事件。比较特别的是，它不仅可以监听单个事件，还可以监听事件类型，比如输出窗口点击事件和所有触摸事件：effects和下面的JavaScript同为：window.addEventListener('click',console.log)window.addEventListener('touchstart',console.log)window.addEventListener('touchmove',console.log)window.addEventListener('touchend',console.log)window.addEventListener('touchcancel',console.log)可以使用unmonitorEvents(element[,eventType])停止监控。getEventListenersgetEventListeners(element)输出已在元素上注册的侦听器。就拿刚才的例子来说，输入monitorEvents(element)再输入getEventListeners(element)可以看到所有的事件都已经注册了。展开的话，可以看到监听器的各种属性：listener：触发事件执行一次的函数：监听器只会被触发一次passive：event.preventDefault()不能执行，通常用于改进监听器的性能，比如scroll类型：监听事件类型useCapture：监听器会在Capture阶段拦截事件。以上属性是执行addEventListener时可以提供的参数。removeEventListener移除监听时不要忘记填写相同的参数。constoptions:{capture:true,passive:true,once:false}window.addEventListener('click',console.log,options);//window.removeEventListener('click',console.log,options);queryObjectsqueryObjects(object)官方的描述是返回所有Constructor生成的实例，但我的理解是：返回原型链中所有包含原型的对象。可以看出，基于a创建的b也会出现在queryObjects(A)的结果中。另外，由于queryObjects并没有直接返回数组，所以在右键菜单中点击Storeasglobalvariable，将数组放入变量temp1中。copycopy(object)copy可以将DOM或对象复制到剪贴板，我有时会使用copy将对象转换为JSON并粘贴到接口文档中，或者在控制台中快速创建或修改假数据。也很贴心的加了缩进keys、valueskeys(object)、values(object)输出对象本身的所有keys或values，效果和Object.keys(object),Object.values(object)，为什么要强调自己呢？如果使用in遍历对象的每一个属性，就会把原型链上的所有属性都取出来，重新运行：constobject=Object.create({foo:1});object.bar=2;for(letkeyinobject){console.log(key)}//bar//foo也必须是可枚举的或不可枚举的。）除了它自己的键。如果想确认属性是否定义在对象本身，可以使用Object.prototype.hasOwnProperty:for(letkeyinobject){if(Object.prototype.hasOwnProperty.call(object,key)){console.log(key);}}//bar至于为什么不使用object.hasWonProperty(key)，请参考以下代码：constobject1={hasOwnProperty:function(){returnfalse;},};constobject2=Object.create(null);object1.key='key';object2.key='key';object1.hasOwnProperty('key');//?object2.hasOwnProperty('key');//?clearclear()虽然点击了🚫在左上角清理Console，但我还是习惯clear()，就像在终端输入clear一样。请注意，当启用保留日志时，您不能使用clear来清除控制台。
