了解前端开发的朋友应该对浏览器的控制台非常熟悉，毕竟日常里除了wife就是跟浏览器相处的最久了。

1、唤出控制台

打开一个网页：

按下键盘【F12】或者鼠标在网页【任意位置】【右键- 检查】，即可唤出浏览器的【控制台】

可以看到鼠标移动会对应提示界面上这是哪个元素

2、日常开发使用之【复制】

这里我就不介绍什么选中元素、修改元素、修改样式的操作了，主要是懒得截图~我们讲一讲针对dom元素的【复制】功能

可以看到在选中dom元素之后，鼠标右键的菜单中，复制功能扩展开有以下几项：

接下来我们一一介绍每个复制功能的具体效果：

复制后粘贴到控制台，我们可以看到：

也就是说，复制元素，就是复制当前html标签和其中的内容，包括标签中的属性也会一起复制下来。

除了粘贴在控制台查看复制元素的内容，也可以直接点击选中页面中其他的元素，右键-粘贴，往选中的dom元素中进行粘贴（给其新增一个子元素）

当然了，粘贴错了位置，我们也可以按下【ctrl+z】撤销元素的粘贴

怎么跟复制元素效果一样哇，麻了，而且一样也能去dom元素中粘贴成子元素，难道这2种复制模式一样？其实不然，因为outerHTML是个实例属性：element.outerHTML

我们可以通过设置 outerHTML 属性来替换整个dom节点

在讲复制selector功能前，我们先讲复制JS路径，这样更便于理解

复制到控制台看一下：

复制JS路径，就是获取到当前选中的这个dom元素的querySelector选择器语句，用这串代码就能获取到当前这个dom元素，可以使用操作dom的方法：

欸，你看，复制selector得到的内容，跟上面复制JS路径得到的内容，是不是很像，其实从selector（选择器）这个单词就能看出来，复制的是当前dom的querySelector选择器的值。

复制出来看，一行行的样式非常多（这样复制出来的样式是一行行的，不是一个类名{样式}这种格式的）