Chrome控制台的使用

---

---

Chrome控制台的使用

基础：

打开方式：

windows:F12

mac:fn+F12

设置控制台显示位置：

控制台右侧点击三个小点图标，dock side就可以进行控制台位置的控制

清除信息:

当想要清除控制台信息时,则可以控制台输入clear或者点击如下图标来进行清除

Elements:

expand recursively：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DAkHxHvJ-1617633182986)(img/elements1.png)]

一个一个展开小箭头效率会很低？没关系，右键dom中的节点，再使用expand recursively就可把所属所有小箭头展开

$0 - $4

$0 - $4返回的是 Elements 面板中最近选择的五个DOM元素或者 Profiles 面板中最近选择5个Javascript堆对象的历史引用。 $0 是最近的引用，$1 是第二近的引用，依次类推。

给html打断点

dom树也是可以打断点的，选中元素后右键就会出现break on，里面有三个选项，依次是子节点调整，自身属性调整和节点移除，设置好断点后，当dom元素被修正时，代码就会自动停留在修正处

当需要查看自己打的断点时，在样式右侧点击DOM Breakpoints即可查看

还有几个小技巧：

ctrl+z撤销对节点的修改

拖拽节点，调整节点顺序

Console:

查看控制台自带方法：

在控制台输入如下命令：

console.dir(console)

或者输入console

常用命令:

1. console.info 用于输出提示性信息
2. console.error用于输出错误信息<