1.打开调试器 F12,或者点击鼠标右键,选择检查或检查属性,打开如下
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/5a46b396ffdf4f2a63cadd0782b3918c.png)
2.elements使用,这里就是html和css了,我们经常在这里进行样式css调试,具体方法如下:
先点击图片中的1,在点击图片中的2,如下
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c010c910ccffd0709911d4d6cb015254.png)
点击以后如下,右边的所有class名和第一个style就是点击的这个元素的css样式,我们可以试着在这里调试修改,如下:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c51da6ecd752f08811d356a444817aaa.png)
我们试着修改颜色,和字体大小,添加了两个属性,效果如下,这个是实时的,方便我们编辑,在这里写好后直接复制到代码中,就不用在编辑器和浏览器之间来回跳啦,修改后:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ffc15f8b0c2986a9ed2865482f7966d5.png)
3.console,这里是打印器,可以理解为一个记录日志,所有的报错信息会在这里体现
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/eadf1ee95ab8c1f928ff07e904cc8407.png)
4.sources,这里是断点调试,也就是debugger,不明的话在你的js里面打上一个debugger试试就知道了,方便按步执行代码,找出代码在那一步出的错
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/489e93300344f99365d18a6e84ec3ec1.png)
5.Network,这里是http请求的调试器,在这里可以查看所有的http请求,包括你的请求头,请求路径,请求参数,后台返回的数据还有请求的状态等等:详细介绍可以看这个:谷歌调试器之http
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ce95a113f7edac315ed552b27232ce6c.png)
6.application,这里就是我们说的浏览器缓存了,存放着缓存的数据,缓存分两种,不懂得看这里哦
谷歌浏览器缓存
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a8c7e6fb8b76948e3ef98eb381d4c4a8.png)
你学废了吗?今天时间有限,赶着下班啦哈哈,觉得有用的小伙伴可以点个关注哦,会持续更新前端实用的开发技巧以及技术相关的文章哦!
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d1a712c8f11c79354a638dde91a5b0f9.jpeg)