Chrome-控制台常用调试技巧详解

1、Chrome 控制台小技巧

• 打开和关闭抽屉式选项卡：按 Esc 键可打开和关闭 DevTools 的 Drawer（抽屉式选项卡）

  1. 在 Drawer（抽屉式选项卡）中，你可以在 Console 控制台中执行命令，查看动画检查器 (Animations)，配置网络条件(network conditions) 和渲染 (rendering) 设置，搜索 (search) 字符串和文件等

• 使用 Request blocking 阻塞请求：

  1. 使用这个功能可以拦截请求；
  2. 比较常用的场景是，页面执行完某操作后页面就进行重定向跳转了，这时如果想调试重定向前发的请求做了啥，就可以使用此功能进行阻塞拦截

• debugger: 代码手动编程设置断点调试；
• 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）输出信息基本方法：

1. console.log 用于输出普通信息
2. console.info 用于输出提示性信息
3. console.error 用于输出错误信息
4. console.warn 用于输出警示信息
5. 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）其他调试输出：

• 计算某段程序运行时间：

  1. console.time('time') 计时开始
  2. console.timeEnd('time') 计时结束

• 计算某段程序运行时 CPU 使用相关信息（统计结束后信息记录在 JavaScript Profiler 面板）：

  1. console.profile('profile') 监听开始
  2. 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 构建代码质量压缩作