Chrome浏览器调试总结

╰半橙微兮° 2023-07-08 12:29 128阅读 0赞

一.调试工具

我是以百度页面为例
在这里插入图片描述
箭头按钮:用于在页面选择一个元素来审查和查看它的相关信息,当我们在Elements这个按钮页面下点击某个Dom元素时,箭头按钮会变成选择状态

设备图标:点击它可以切换到不同的终端进行开发模式,移动端和pc端的一个切换,可以选择不同的移动终端设备,同时可以选择不同的尺寸比例。

在这里插入图片描述
Element内容:用来查看,修改页面上的元素,包括DOM标签,以及css样式的查看,修改,还有相关盒模型的图形信息。
在这里插入图片描述

盒模型:
在这里插入图片描述
二.控制台打印

用于打印和输出相关的命令信息
在这里插入图片描述
三. Sources:

js资源页面:这个页面内我们可以找到浏览器页面中的js 源文件,方便我们查看和调试
在这里插入图片描述
可读模式:
在这里插入图片描述

发表评论

表情:
评论列表 (有 0 条评论,128人围观)

还没有评论,来说两句吧...

相关阅读

    相关 chrome浏览器调试H5页面

    可能是我少见多怪,看到前端同学用chromel来查看给APP端适配的H5效果,感觉竟然可以这样。之前只是通过开发者模式来看一下请求入参和返回,突然感觉get一个新技能。 一首

    相关 前端chrome浏览器调试总结

      引言 “工欲善其事,必先利其器” 恩,这句话我觉得说的特别有道理,举个例子来说吧,厉害的化妆师都有一套非常专业的刷子,散粉刷负责定妆,眼影刷负责打眼影,各司其职,有了专