谷歌浏览器控制台调试器的基本使用方法,常用方法必备,手把手教学

1.打开调试器 F12,或者点击鼠标右键,选择检查或检查属性,打开如下

在这里插入图片描述

2.elements使用,这里就是html和css了,我们经常在这里进行样式css调试,具体方法如下:

先点击图片中的1,在点击图片中的2,如下
在这里插入图片描述
点击以后如下,右边的所有class名和第一个style就是点击的这个元素的css样式,我们可以试着在这里调试修改,如下:
在这里插入图片描述
我们试着修改颜色,和字体大小,添加了两个属性,效果如下,这个是实时的,方便我们编辑,在这里写好后直接复制到代码中,就不用在编辑器和浏览器之间来回跳啦,修改后:

在这里插入图片描述

3.console,这里是打印器,可以理解为一个记录日志,所有的报错信息会在这里体现

在这里插入图片描述

4.sources,这里是断点调试,也就是debugger,不明的话在你的js里面打上一个debugger试试就知道了,方便按步执行代码,找出代码在那一步出的错

在这里插入图片描述

5.Network,这里是http请求的调试器,在这里可以查看所有的http请求,包括你的请求头,请求路径,请求参数,后台返回的数据还有请求的状态等等:详细介绍可以看这个:谷歌调试器之http

在这里插入图片描述

6.application,这里就是我们说的浏览器缓存了,存放着缓存的数据,缓存分两种,不懂得看这里哦

谷歌浏览器缓存

在这里插入图片描述

你学废了吗?今天时间有限,赶着下班啦哈哈,觉得有用的小伙伴可以点个关注哦,会持续更新前端实用的开发技巧以及技术相关的文章哦!

在这里插入图片描述

  • 2
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端攻城狮路飞

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值