前言
chrome浏览器带有丰富的调试工具，平常生活中小伙伴们只会使用console.log打印值来进行调试。本节我们将学习使用chrome浏览器进行调试。
创建应用
首先我们创建一个react-app，接下来的调试我们都将以react为例。
yarn create react-app react-debugger
一、用Sources进行断点调试
启动服务以后，我们打开控制台来到Source，找到react应用的入口文件。
在代码当中，我们就可以设置断点，刷新页面以后，页面就会停在我们所停住的位置。
在Scope（作用域）中，我们就可以查看当前的数据状态。
在右上方我们可以看到用于调试控制的几个按钮
他们分别是：恢复执行、单步执行、进入函数调用、跳出函数调用、让断点失效、在异常处停住。
二、用Elements进行Dom和css调试
Elements是我们经常会使用的一个面板，在这个面板我们可以直接查看元素以及它的属性和样式。我们也可以在这个面板对他们进行编辑调试。
- 双击元素，我们可以直接编辑元素的属性和样式名。
值得一提的是，我们可以修改元素的伪元素状态，让其保持hover或者active，从而方便我们在hover的同时查看该元素的状态、样式。
- 选中元素以后，右边的面板就会将该元素当前的状态展示。
在这个面板当中，我们可以十分方便的编辑该元素的样式，可以看到该元素的盒模型。
三、用console进行交互
一方面用来记录页面在执行过程中的信息（一般通过各种 console 语句来实现），另一方面用来当做 shell 窗口来执行脚本以及与页面文档、DevTools等进行交互。比如，执行node服务，就可以用console进行其devTools。
当我们不使用断点调试时，我们通常会通过控制台来打印我们所想知道的信息。下面是一些控制台相关的常用api。
1、console.log 用于输出普通信息
2、console.info 用于输出提示性信息
3、console.error 用于输出错误信息
4、console.warn 用于输出警示信息
5、console.group 输出一组信息的开头
6、console.groupEnd 结束一组输出信息
上面的两个api要结合使用。他们将信息进行分组，在我们循环打印数据的时候很好用。
for(let i=0; i<3 ; i++) {
console.group(`tax_${i}`)// 参数是组名，同一组会被分到一起，不写参数就是console.group
console.log(i);
console.log(`tax_${i}`);
console.groupEnd();
}
这样一来输出的数据就变得一目了然。
7、console.assert 对输入的表达式进行断言，只有表达式为false时，才输出相应的信息到控制台
let dataA = [1,2];
let dataB = [3,4];
console.assert(true, ...dataA);
console.assert(false, ...dataB);
8、console.count 统计代码被执行的次数
这个也是十分实用的api。
for (let i=0; i<10 ; i++) {
console.count('count');
}
函数的参数是一个label，这个函数会统计相同label的函数被执行了几遍。
9、console.dir 直接将该DOM结点以DOM树的结构进行输出，可以详细查对象的方法等等
let a = () => {
return 111
};
console.log(a);
console.dir(a);
10、console.time 计时开始
11、console.timeEnd 计时结束
这两个api和group、groupEnd一样需要组合使用，一般可以用来进行效率的测试。
console.time('test');
for(let i=0; i<10000; i++){}
console.timeEnd('test');
