Chrome浏览器如何做调试

在前端开发中，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浏览器调试功能的简单介绍啦~

多使多看，孰能生巧。