chrome浏览器开发工具的基本使用

查看浏览器的版本：chrome://version/

快捷键	打开内容
Command+ Option+ c	Elements
Command+ Option+ j	Console
Command+ Option+ i	打开你之前打开的最后一个面板
command+ [ 或者 command + ]	工具栏左右切换
command + shift + p	command列表（里面有很多小功能）值得一提这个截图功能，太强大了

一、Elements

可以查看和编辑页面和样式，而且所做的改变立即生效
Properties 可以查看全部的属性

1.箭头（一键定位到源码位置 & 查看Dom）

2.computed（查看具体模块的CSS，样式覆盖多的时候查看会比较清晰）

二、Console

方法	作用	示例
console.log({ })	区分开多个参数
console.clear()	用来清空控制台	(警告) ：在chrome中，如果用户设置了“ Preserve log”选项， console.clear()方法就不起作用了
console.time() 开始 console.timeEnd() 结束	通过标记起始位置来计算时间	起始函数 传入的参数要一致
console.trace()	用于追踪代码的调用栈
console.table()	可以将复合数据类型转为表格显示