1.Chrome控制台提示打开和关闭抽屉标签：在Drawer（抽屉标签）中按Esc键打开和关闭DevTools的Drawer（抽屉标签），可以在Console控制台执行命令，查看动画检查器（Animations），配置网络条件（networkconditions）和渲染（rendering）设置，搜索（search）字符串和文件等。比较常见的场景是页面执行某个操作后页面被重定向。这时，如果你想调试重定向前发送的请求做了什么，可以使用这个功能来阻塞和拦截调试器：代码手动编程设置断点调试；Coverage代码覆盖率检测：可以观察代码覆盖率，有无用处，去掉无用代码，减少代码体积。用控制台修改的代码类似于git的diff功能。红色代表删除，绿色代码为新增；snippets：代码可以暂时在console运行，但是写的格式不是很友好，换行就执行（虽然可以shift+enter换行），不写怎么办想要打开代码编辑器，你可以使用Snippets工具创建js脚本，你可以在任何页面上从ChromeDevTools面板访问并执行它们（除非你删除它们）。2、console控制台命令$_：返回上次计算表达式的值；$(selector)：返回匹配指定CSS选择器的第一个DOM元素的引用，实际上是document.querySelector()函数的别名；$$(selector):$\$(selector)返回匹配给定CSS选择器的元素数组，相当于调用document.querySelectorAll();$x(path)：返回一个与给定的DOM元素的XPath表达式数组相匹配的数组；clear()：清除控制台中的所有历史记录；copy(object)：将指定对象的字符串表示复制到剪贴板；debug(function):当调用指定的函数时，调用调试器并暂停在Sources（源文件）面板上函数内部的断点处；dir(object)：ConsoleAPI的console.dir()方法的别名。getEventListeners(object)返回在指定对象上注册事件的侦听器。keys(object)返回一个数组，其中包含属于指定对象的属性名称；values(object)：返回包含属于指定对象的属性值的数组；document.body.contentEditable=true：将浏览器变成编辑器monitorEvents(document.body,"click"):第一个参数是要监视的对象。如果没有提供第二个参数，则返回所有事件。要指定要监视的事件，将字符串或字符串数??组作为第二个参数传递；unmonitorEvents(document.body)：停止监听body对象上的事件；3.ConsoleAPI详解使用一个大命令控制台，看看有什么？(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('infoinformation')console.warn('info')console.warn('info1')console.groupEnd()console.group('loginformation')console.warn('log1')console.warn('log2')console.groupEnd()console.group('errorinformation')console.warn('error1')console.warn('error2')console.groupEnd()添加样式到控制台输出（你也可以通过背景属性image输出)['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：代替forin输出详细的对象信息，经常遇到的坑是，使用console.log想打印出对象信息，发现只有[objectObject]，dir就可以用了；dirxml是否可以打印成xml格式让obj={test_1:'ffff',test_2:'这是测试',fn:()=>{console.log('fn')},arr_1:[1,{a:'arr_obj'},'string']}console.group('日志打印对象')console.log(obj)console.groupEnd()console.group('dir打印对象')console.dirxml(obj)console.groupEnd()console.group('dirxml打印对象')console.dirxml(obj)console.groupEnd()console.group('日志打印数组')console.log(obj.arr_1)console.groupEnd()console.group('dir打印数组')console.dirxml(obj.arr_1)console.groupEnd()console.group('dirxmlprintarray')console.dirxml(obj.arr_1)console.groupEnd()有时对象或数组数据过多，如果能显示直观地以表格形式就完美了，console.table满足你让obj={test_1:'ffff',test_2:'thisistest',fn:()=>{console.log('fn')},arr_1:[1,{a:'arr_obj'},'string']}console.group('tableprint')console.table(obj)console.groupEnd()(3)其他调试输出：计算某个程序的运行时间:console.time('time')计时开始console.timeEnd('time')计时结束，在某个程序运行时计算CPU使用率相关信息（统计结束后在JavaScriptProfiler面板记录该信息）:console.profile('profile')开始监听console.profileEnd('profile')监听结束条件输出（断言输出，如果计算表达式返回false，则向控制台写入错误）：console.assert(false,'只有为false时才输出')console.assert(true,'为真时不输出')console.count('fnexecutiontimes:')需要统计代码执行次数；console.timeLine,console.timeLineEnd记录一段时间轴console.clear():清空控制台console.debug():方法同console.logconsole.timeStamp():期间在Timeline面板添加一个事件recordingsessionconsole.trace('test',obj):wherethemethodiscalled打印stacktrace“积步数，行万里路”——越来越懒的自己，回来吧！懒惰是不好的。喜欢就点赞关注吧！往期经典好文：你不知道的CORS跨域资源共享性能优化---Webpack构建速度优化性能优化---Webpack构建代码质量压缩
