Chrome 开发者工具的使用介绍

谷歌浏览器开发者工具打开方式

1. 在网页中通鼠标右键 -> 检查 -> 打开控制台

2. 通过快捷键打开 F12 打开控制台，或者ctrl + shift + i 打开控制台

3. 通过自定义及控制 -> 更多工具 -> 开发者工具

选择元素
　　当在页面中有很多元素时需要找到某个元素时使用。首先点击开发者工具左上角的箭头，在用鼠标点击页面中对应的元素。将会找到对应的元素

移动端模拟
　　点击控制台的左上角一个手机的图标将会把视口改成移动端。可以自己调整手机尺寸

Elements选项
　　Elements选项常用来查看元素的样式及元素的位置，以及元素的盒模型。

1. 查看样式对应的文件及对应行数，下图表示该样式书写在 text.html 文件的第8行中

2. 调试元素样式

3. 调整原有颜色值或者是吸取页面中其他颜色值

4. 给元素添加新的类名

5. 查看伪类样式效果

6. 移动及修改元素

Console选项
　　用于查看JS打印的代码结果，和显示错误信息，能够直接在控制台输入JS代码

控制台相关API
1. console.assert(表达式, 对象) ------ 向控制台输出错误
2. console.clear() ------ 清空控制台
3. console.count([标号]) ------ 显示打印的次数，计数器。
4. console.countReset([标号]) ------ 重置计数器。
5. console.debug(object [，object，...]) ------ 打印信息与console.log()一样
6. console.dir(对象) ------ 打印指定对象的JSON表示形式
7. console.dirxml(节点) ------ 打印节点的后代信息
8. console.error(object [，object，...]) ------ 打印object到控制台，将其格式化为错误，并包含堆栈跟踪。
9. console.group(标签) ------ 可视化地将消息组合在一起直到console.groupEnd(label)被调用。用于 console.groupCollapsed(label)在最初登录到控制台时折叠组。
示例：

1 console.group(label);
2 console.info('Leo');
3 console.info('Mike');
4 console.info('Don');
5 console.info('Raph');
6 console.groupEnd(label);

10. console.info(object [，object，...]) ------ 与console.log() 方法一样打印日志到控制台
11. console.log(object [，object，...]) ------ 将消息打印到控制台。
12. console.table(数组) ------ 将对象数组记录为表
13. console.time([标号]) ------ 启动一个新的计时器。调用console.timeEnd([label])停止计时器并将经过的时间打印到控制台。

14. console.trace() ------ 将堆栈跟踪打印到控制台。
示例：

1 const first = () => { second(); };
2 const second = () => { third(); };
3 const third = () => { fourth(); };
4 const fourth = () => { console.trace(); };
5 first();

15. console.warn(object [，object，...]) ------ 向控制台打印警告。

console面板介绍