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）