从网上看了不少Chrome调试工具的使用说明，介绍的详细的有，但是思路有点混乱不太清晰，趁着清闲的时间，对Chrome F12调用出来的工具，使用做一下具体的说明和规范。

1.箭头按钮：用于在页面选择一个元素来审查和查看它的相关信息，当我们在Elements这个按钮页面下点击某个Dom元素时，箭头按钮会变成选择状态，方便用户定位标签尺寸和代码位置

2.设备图标：点击它可以切换到不同的终端进行开发模式，移动端和pc端的一个切换，可以选择不同的移动终端设备，同时可以选择不同的尺寸比例，chrome浏览器的模拟移动设备和真实的设备相差不大，是非常好的选择。

3.Elements 功能标签页：使用和查看，也可以修改页面上的标签元素，

如图1，可以修改的是标签中css样式，2中可以修改的是盒模型的相对位置信息。1中的样式，

被横线划掉的是优先级比较低，被覆盖或者被屏蔽的样式。

头部显示的element.style 样式，是自动生成或者js代码动态生成的

文件保存的css样式，在标签名的右边会显示，样式的所在路径和名称

样式是实时修改变动的，不需要在项目代码中，一点一点的调节。

盒模型，可以实时调节标签或者说元素的相对距离，margin为外边距，padding为内边距，border是指元素的边框的尺寸和样式调节，最中间的是元素的实际大小

4.Console控制台：用于打印和输出相关的命令信息，其实console控制台除了我们熟知的报错，还有很强大的功能：这里重点介绍一下

（下面图中，我想大家也看到了，逗比的百度招聘，之前也看到过类似的淘宝招聘，都显示在Console页面）

在console中输入console.dir(console)点击回车,红框中所显示的是console中所有的方法，可以供你使用

console.log 用于输出普通信息（前端开发，使用比较多的方法）

console.info用于输出提示性信息

console.error用于输出错误信息

console.warn用于输出警示信息

console.groupEnd结束一组输出信息

console.assert对输入的表达式进行断言，只有表达式为false时，才输出相应的信息到控制台。如下图，输入代码var x=false; console.assert(x,"你好");这里只是为了调试，一般情况代码是写在项目的前端代码中，用来调试可能出现的情况

console.count（这个方法非常实用哦）当你想统计代码被执行的次数，代码放在function中，统计方法执行次数

console.dir(这个方法是我们刚刚使用过的。 他的使用比for in方便了很多) 直接将该DOM结点以DOM树的结构进行输出，可以详细查对象的方法发展等等，如图，app4是vue.js的写法。obj只是一般

JavaScript的写法使用dir，obj的比较清晰点，app4，因为是vue生成，所以比较复杂。

console.time计时开始。console.timeEnd 计时结束（看了下面的图你瞬间就感受到它的厉害了）中间插入运行代码，可以用来记录代码段运行实时时间。

keys和values 前者返回传入对象所有属性名组成的数据，后者返回所有属性值组成的数组。

console.table方法，把数据json输入放入，能模拟出表格显示数据信息

Chrome 控制台中原生支持类jQuery的选择器，也就是说你可以用$加上熟悉的css选择器来选择DOM节。这里如果你写爬虫的话，可以使用这个功能快速定位要爬取的数据，写出正则表达式

console.profile和console.profileEnd配合一起使用来查看CPU使用相关信。要查看的代码段翻入其中，可以查看代码段运行时，cpu的使用情况