这是我参与「第四届青训营 」笔记创作活动的第13天
写代码难免会出现bug,因此我们得学会debug来帮助我们来更快地找出问题所在,然后对症下药,解决问题.
前端很多时间都是在与页面打交道,很多时候需要在浏览器中调试页面,这时就需要我们了解如何去利用浏览器的调试工具来帮助我们去进行页面的调试.
这里就说一下Chrome,我自己也是常用Chrome来进行开发.
Chrome的调试功能是十分强大的,下面就说说常用的功能.
1.查看激活伪类样式
有时候想查看一下:hover,:focus之类的伪类被激活之后的样式,但是有时候光自己一个鼠标似乎点不过来,这时候可以使用Chrome的功能来激活伪类
像这里,鼠标放在上面会有提示文字出现
我们可以F12然后选中这个头像的元素
然后在样式栏中,选中hover的选项,就可以强制激活hover样式
注意头像的颜色变化,那就是hover样式激活了
2.查看网络请求
前端很多时候都会发请求到后台,很多时候我们就会想查看一下我们发的请求究竟正不正确,这时候就可以在F12的控制台中查看到我们的网络请求,在F12 -> 'Network'中能看到我们发送的请求
如果想查看请求的详细信息,可以点击一下,这样就可以查看里面的字段和数据之类的信息
这里就能看到他的请求路径,请求方式,状态码等信息
Chrome的调试工具十分强大,这里也说不完他的功能,想要了解更多的话可以自己去探索,有十分多的功能都是十分有用的,可以对我们的开发提供十分有力的帮助.
