1. console.dir打印
在打印dom节点时，普通的console.log是纯文本格式，而dir的打印是以对象的方式。因此在输出dom节点时请使用console.dir打印
let Dom = document.querySelector('.contnet-wrap')
console.log(Dom)
console.dir(Dom)
2. console.table()打印
在打印数组或者对象的时候，打印出的数据往往是折叠起来的，查看其实不是很方便
let tableData = [{name: '小明',age: 19, address: '小明的家'},{name: '小红',age: 18, address: '小红的家'}]
console.log(tableData)
这时我们可以使用console.table()打印。数据的展示清晰明了。
let tableData = [{name: '小明',age: 19, address: '小明的家'},{name: '小红',age: 18, address: '小红的家'}]
console.table()(tableData)
我们往往仅关心某个数据/字段，你还可以指定要查看哪些列(字段)，针对性处理。
let tableData = [{name: '小明',age: 19, address: '小明的家'},{name: '小红',age: 18, address: '小红的家'}]
console.table(tableData,['address'])
3. console.group()分组打印
在调试函数，尤其是定位执行过程时,可能会使用打印来进行调试。但是这样打印展示的结果也不是非常的清楚明了
function b() {
console.log('This is b');
console.log('Test');
}
function a() {
console.log('This is a');
console.log('Test1');
b();
console.log('Test2');
}
a();
这种时候，推荐使用console.group()/console.groupCollapsed()进行分组打印，console.groupEnd()则用来闭合分组。
这样打印结果就非常的清晰了。
4. 展开全部dom
有时候我们在页面查找一个dom时，它嵌套层级特别深。
选中元素右键Expand Recursively展开该元素下的全部层级
5. 控制台输出选择的dom
在element中选中想要打印的元素，在控制台console中输入console.log($0)后即可打印选中的元素
$0 指代的是当前我们选中的节点，$1指我们前一次选中的DOM节点，$2 指上上次，以此类推，一直到$4
、
在控制台直接输入1、$2等也有同样的效果
6. 断点编辑
在开发的时候，可以通过控制台上进行断点调试，如下图所示，演示的是在Chrome上打断点：
这个断点也是可以编辑的，允许开发者有条件的触发，如下图：
testa(0)
function testa (a) {
if (a < 5) {
console.log('断点'+ a)
testa(a + 1)
}
}
设置了这个断点条件之后，在断点的地方，就会有一个小问号，同时，我这段代码的断点只会在a为偶数的时候触发。
7. $与$$
在浏览器的控制台里输入$('.元素类名')，控制台会打印出当前类名的元素 在浏览器的控制台里输入$$('.元素类名')，控制台会打印出所有类名的元素
$ 等价于 document.querySelector()
$$ 等价于 document.querySelectorAll()
8. 线上代码调试
如果是线上的环境，能不能直接修改源代码（JS、CSS）调试呢？—— 可以的。思路就是创建本地的JS副本，页面加载本地的JS文件，就可以在本地JS文件上修改了。
创建本地工作目录： 如下图，源代码下面找到“覆盖（Override）”
- 然后点击“选择替代文件夹”，添加一个本地空的文件夹，作为本地工作目录。
- 添加后要注意要确认授权。
创建源代码的本地副本：选择需要修改的源代码右键“保存以备替代”，就会在本地目录创建副本文件，网页使用本地的JS文件。
- 创建的本地副本，可以在“覆盖”下看到，也可以在本地文件夹下看到。
编辑代码：该JS文件就可以直接在源代码中编辑修改了，实时生效。
- CSS、HTML、JavaScript都支持。
- 可以在浏览器的源代码中修改，也可以本地其他工具中打开编辑。
- 修改完成后保存即可
完成操作见下图
