Chrome浏览器如何做调试
【摘要】 在前端开发中,Chrome浏览器是非常好用的调试工具,本文中,我们来看一下具体怎样使用Chrome来进行调试工作。首先,我用Chrome打开了一个本地的页面:打开页面后,右键--》检查,就可以打开调试后台了。下面我们根据调试工具栏的显示顺序,逐一来了解一下:1,是个小箭头,点击箭头,会变成蓝色,这时候将鼠标悬浮在左侧页面上,就可以点中鼠标悬停下方的元素:2,是手机平板的图标,点中后,页面会变...
在前端开发中,Chrome浏览器是非常好用的调试工具,本文中,我们来看一下具体怎样使用Chrome来进行调试工作。
首先,我用Chrome打开了一个本地的页面:
打开页面后,右键--》检查,就可以打开调试后台了。下面我们根据调试工具栏的显示顺序,逐一来了解一下:
1,是个小箭头,点击箭头,会变成蓝色,这时候将鼠标悬浮在左侧页面上,就可以点中鼠标悬停下方的元素:
2,是手机平板的图标,点中后,页面会变成移动端的样子,你可以根据自己的开发需求,来选择什么样的设备或者分辨率:
3,是Elements窗口,可以在这个窗口里看到页面的文档结构:
4,是console窗口,是控制台,在这里,可以配合js做调试,最常用的命令就是console.log(),使用它可以调试我们的js文件,打印出我们想要定位的数据、元素、错误原因等等:
5,Network窗口,这个窗口是查看http请求的,当我们发起请求的时候,这里会看到具体请求的内容,返回值得内容,以及请求的状态等相关信息(我本地页面没有请求接口,我们看下百度首页的请求示例):
6,Sources窗口,这个是项目资源窗口,它左侧是项目目录,我们可以看到当前页面都加载了哪些文件,而且在这个窗口下,找到js文件,可以打断点,配合js调试,更准确的找到bug:
7,Application窗口,这里可以看到当前页面的缓存信息等,对于需要记录某种状态的时候,可能会用到页面缓存,就可以到这里来查看:
8,就是最右侧的窗口,这里会根据你选择的窗口发生变化,比如选择Elements的时候呢,会看到元素的样式,选择Sources窗口点中js文件时,能看到断点操作区域啊,js相关内容的信息提示啊什么的,这里的信息,取决于你使用什么功能~
以上就是Chrome浏览器调试功能的简单介绍啦~
多使多看,孰能生巧。
【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论(0)