共计 3333 个字符，预计需要花费 9 分钟才能阅读完成。
在 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 个计划及实现
- 更多文章 …
