Coverage
代码覆盖率检测：可以观察到代码覆盖率，哪些是没用的，去除无用代码，较少代码体积
Changes
变化:显示更改代码的比较，可以通过这个工具观察你用控制台修改过的代码，类似于git 的 diff 功能类似，红色代表删除、绿色代码新增;
Snippets
:在 console 里可以临时运行代码，但是书写格式不太友好，而且一换行就执行了（虽然可以 shift+enter 换行），不想打开代码编辑器怎么办，可以使用 Snippets 这个工具创建js脚本，并可以访问和从任何页面的Chrome DevTools面板中执行（除非你删除）。
2、console控制台命令
$_
:返回最近一次计算的表达式的值；
$(selector):
返回匹配指定CSS选择器的第一个DOM元素的引用,实际是document.querySelector()函数的别名；
$$(selector)
:$$(selector)返回一个与给定CSS选择器匹配的元素数组,等效于调用document.querySelectorAll();
$x(path)
:返回一个与给定XPath表达式匹配的DOM元素的数组;
clear()
: 清除控制台中所有历史记录;
copy(object)
:将指定对象的字符串表示复制到剪贴板;
debug(function)
:当调用指定的函数时，调试器被调用并在Sources(源文件)面板上的函数内部断点暂停;
dir(object)
:Console API的console.dir()方法的别名。
getEventListeners(object)
返回在指定对象上注册事件的监听器
keys(object)
返回一个数组，该数组包含属于指定对象的属性名;
values(object)
:回一个数组，该数组包含属于指定对象的属性值;
document.body.contentEditable=true
:将浏览器变成编辑器
monitorEvents(document.body, "click")
:第一个参数是要监听的对象。如果未提供第二个参数，所有事件都会返回。要指定要监听的事件，传递一个字符串或字符串数组作为第二个参数;
unmonitorEvents(document.body)
:停止监听body对象上的事件;
3、console API详解
有开发就有console，开发调试必使用的一大命令console，看看都有些啥？
（1）输出信息基本方法：
console.log 用于输出普通信息
console.info 用于输出提示性信息
console.error用于输出错误信息
console.warn用于输出警示信息
console.group&&console.groupEnd分组输出，console.groupCollapsed创建新分组
console.group("warn警告信息")
console.warn("warn1")
console.warn("warn2")
console.warn("warn3")
console.groupEnd()
console.group("info信息")
console.warn("info")
console.warn("info1")
console.groupEnd()
console.group("log信息")
console.warn("log1")
console.warn("log2")
console.groupEnd()
console.group("error信息")
console.warn("error1")
console.warn("error2")
console.groupEnd()
给console输出添加样式(通过背景属性图片也可以输出哦)
["log","info","warn","error"].forEach(item => {
let $print = console[item];
console[item] = function() {
$print.call(console, "%c"+Array.prototype.slice.apply(arguments).join(" "), "font-size: 16px;padding:10px;font-weight: bold;text-decoration: underline;")
（2）复杂类型输出：
console.dir | console.dirxml:替代for in详细的输出对象信息，经常遇到的坑点是，使用console.log想打印出对象信息,发现只有[object Object],现在可以使用dir;dirxml如果可以会使用xml形式打印。
let obj = {
test_1: "ffff",
test_2: "这是test",
fn: () => {
console.log("fn")
arr_1: [1,{a: "arr_obj"}, "string"]
console.group("log打印对象")
console.log(obj)
console.groupEnd()
console.group("dir打印对象")
console.dirxml(obj)
console.groupEnd()
console.group("dirxml打印对象")
console.dirxml(obj)
console.groupEnd()
console.group("log打印数组")
console.log(obj.arr_1)
console.groupEnd()
console.group("dir打印数组")
console.dirxml(obj.arr_1)
console.groupEnd()
console.group("dirxml打印数组")
console.dirxml(obj.arr_1)
console.groupEnd()
有时候对象或者数组数据过多，要是能表格形式直观展示就perfect，console.table满足你
let obj = {
test_1: "ffff",
test_2: "这是test",
fn: () => {
console.log("fn")
arr_1: [1,{a: "arr_obj"}, "string"]
console.group("table打印")
console.table(obj)
console.groupEnd()
（3）其他调试输出：
计算某段程序运行时间：
console.time("time") 计时开始
console.timeEnd("time") 计时结束
计算某段程序运行时CPU使用相关信息（统计结束后信息记录在JavaScript Profiler面板）：
console.profile("profile") 监听开始
console.profileEnd("profile") 监听结束
条件输出（断言输出，如果计算表达式返回false时,向控制台写入一个error）：
console.assert(false, "为false时才输出")
console.assert(true, "为true时不输出")
console.count("fn执行次数：")统计代码执行次数的必备；
console.timeLine、console.timeLineEnd记录一段时间轴
console.clear():清空控制台
console.debug():使用方式和console.log一样
console.timeStamp():在记录会话期间向Timeline(时间轴)面板添加一个事件
console.trace(‘test’, obj):在调用该方法的地方打印堆栈跟踪。
“积跬步、行千里”—— 越来越懒的自己，回来吧！态懒可不太好。喜欢的话留下个赞和关注哦！
往期经典好文：
你不知道的CORS跨域资源共享
性能优化篇---Webpack构建速度优化
性能优化篇---Webpack构建代码质量压缩作
阅读 530
·
2021-11-22 13:52
阅读 1109
·
2021-11-19 09:40
阅读 2472
·
2021-11-16 11:44
阅读 713
·
2021-11-15 11:39
阅读 3339
·
2021-10-08 10:04
阅读 3910
·
2021-09-22 14:57
阅读 2762
·
2021-09-10 10:50
阅读 2824
·
2021-08-17 10:13
