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

Console Utility Functions

这些函数只能用在 Chrome 的 console 中。当我在第一次看到这些函数时十分兴奋，把它们间接写到了本人的代码中，后果当然是跳出了各种 Uncaught ReferenceError：xxx is not defined 谬误。

$_

$_ 会存储的执行后果，在控制台测试 JavaScript 的时候通常都须要逐渐确认，这正是 $_ 的用武之地：

　

在遇到不能链式调用的函数时能够用 $_ 来防止游标被批改：

顺带提一句，未来也有可能会呈现 Pipeline operator 来做到任意的函数链接，一次来促成晋升性或防止批改内建原型。

let a;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 引入为 $ 的话，还是会失常执行 JQuery 的。

　

debug

debug(function)

参数为一个函数，只有执行到该函数就会触发调试器，能够用 undebug(fn) 来勾销：

function a() {  console.log(1);}debug(a);// undebug(a);

其成果相当于：

function a() {  console.log(1);}a = (function() {  const origin = a;  return function() {    debugger;    origin();  }})();

monitor

monitor(function)

用法和 debug 相似，monitor 函数被执行时会输入函数名称和参数，可用 unmonitor(function) 来进行，不过不能用于箭头函数，如果要监听箭头函数的执行就只能手动重写了。

monitorEvents

monitorEvents(element[, eventType])

能够监听并输入元素的特定事件，比拟特地的是除了能监听单个事件，还能监听事件类型，例如输入 window 的点击事件和所有 touch 类别的事件：

成果和以下 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])来进行监听。

getEventListeners

getEventListeners(element)

输入已注册在元素上的监听器，就拿方才的例子来说，输出 monitorEvents(element) 后再输出 getEventListeners(element) 就会看到所有事件都被注册了一波：

开展的话能够看到监听器的各种属性：

  • listener：触发事件执行的函数
  • once：该监听器只会触发一次
  • passive：无奈执行event.preventDefault()，通常用于晋升监听器的性能，如 scroll
  • type：监听事件类型
  • useCapture：监听器会在 Capture 阶段拦挡事件

以上属性都是在执行 addEventListener 时所可能提供的参数，别忘了在 removeEventListener 时也要填入雷同的参数能力除监听器。

const options: {  capture: true,  passive: true,  once: false}window.addEventListener('click', console.log, options);// window.removeEventListener('click', console.log, options);

　

queryObjects

queryObjects(object)

官网阐明是返回 Constructor 产生的所有实例，不过我的了解是：返回所有原型链中蕴含该原型的对象。

能够看到以 a 为原型创立的 b也会呈现在 queryObjects(A) 的后果中。

另外因为 queryObjects 并不会间接返回数组，所以要点右键菜单中的 Store as global variable 把数组放进变量 temp1。
　

copy

copy(object)

copy 可能把 DOM 或对象复制到剪贴板，我有时会用 copy 把对象转为 JSON 并粘贴到接口文档中，或者在控制台中疾速创立或批改假数据。

还很贴心的加上了缩进

　

keys, values

keys(object), values(object)

输入对象自身的所有 key 或 value，成果与 Object.keys(object)，Object.values(object)雷同，为什么要强调本身呢？如果是用 in 来遍历对象的每个属性，就会把原型链上所有的属性全都拿进去进去跑一遍：

const object = Object.create({ foo: 1});object.bar = 2;for (let key in object) {  console.log(key)}// bar// foo
除了本身的 key，还要 enumerable or not.)。

如果想要确认属性是否是定义在对象自身能够用 Object.prototype.hasOwnProperty：

for (let key in object) {  if (Object.prototype.hasOwnProperty.call(object, key)) {    console.log(key);  }}// bar

至于为什么不必 object.hasWonProperty(key)，请参考上面的代码：

const object1 = {  hasOwnProperty: function() {    return false;  },};const object2 = Object.create(null);object1.key = 'key';object2.key = 'key';object1.hasOwnProperty('key'); // ?object2.hasOwnProperty('key'); // ?

clear

clear()

尽管点击左上角的 ???? 就能够把 Console 清理洁净，但我还是习惯用 clear()，就像在终端中输出clear 那样。

留神在 Preserve log 开启的状况下不能用 clear 清空 Console。

　

本文首发微信公众号：前端先锋

欢送扫描二维码关注公众号，每天都给你推送陈腐的前端技术文章

欢送持续浏览本专栏其它高赞文章：

  • 深刻了解Shadow DOM v1
  • 一步步教你用 WebVR 实现虚拟现实游戏
  • 13个帮你进步开发效率的古代CSS框架
  • 疾速上手BootstrapVue
  • JavaScript引擎是如何工作的？从调用栈到Promise你须要晓得的所有
  • WebSocket实战：在 Node 和 React 之间进行实时通信
  • 对于 Git 的 20 个面试题
  • 深刻解析 Node.js 的 console.log
  • Node.js 到底是什么？
  • 30分钟用Node.js构建一个API服务器
  • Javascript的对象拷贝
  • 程序员30岁前月薪达不到30K，该何去何从
  • 14个最好的 JavaScript 数据可视化库
  • 8 个给前端的顶级 VS Code 扩大插件
  • Node.js 多线程齐全指南
  • 把HTML转成PDF的4个计划及实现
  • 更多文章...