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

jiezi

5 年前

打开和关闭抽屉式选项卡：按 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 面板中执行（除非你删除）。

$_: 返回最近一次计算的表达式的值；
$(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 对象上的事件;

有开发就有 console，开发调试必使用的一大命令 console，看看都有些啥？

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;')
    }
})

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()

计算某段程序运行时间：
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 构建代码质量压缩作

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

1、Chrome 控制台小技巧

2、console 控制台命令

3、console API 详解

（1）输出信息基本方法：

（2）复杂类型输出：

（3）其他调试输出：