Chrome浏览器调试页面详解 ｜ 青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第11天。

在Chrome浏览器页面按下F12。

图最上头的一行是一个功能菜单，每一个菜单都有它相应的功能和使用方法，依次从左往右来看：

1. 箭头按钮：用于在页面选择一个元素来审查和查看它的相关信息，当我们在元素这个按钮页面下点击某个Dom元素时，箭头按钮会变成选择状态；
   2.设备图标：点击它可以切换到不同的终端进行开发模式，移动端和PC端的一个切换，可以选择不同的移动终端设备，同时可以选择不同的尺寸比例，Chrome浏览器的模拟移动设备和真实的设备相差不大，是非常好的选择；
2. 元素：功能标签页。用来查看，修改页面上的元素，包括DOM标签，以及CSS样式的查看，修改，还有相关盒模型的图形信息；
3. 控制台：用于打印和输出相关的命令信息，比如console.log信息；
4. 源代码：JS资源页面。这个页面内我们可以找到当然浏览器页面中的js源文件，方便我们查看和调试所有的代码都是压缩之后的代码，我们可以点击下面的{}大括号按钮将代码转成可读格式；
5. 网络：网络请求标签页。可以看到所有的资源请求，包括网络请求，图片资源，HTML,CSS,JS文件等请求，可以根据需求筛选请求项，一般多用于网络请求的查看和分析，分析后端接口是否正确传输，获取的数据是否准确，请求头，请求参数的查看;
6. 性能：显示JS执行时间、页面元素渲染时间；
7. 内存：查看CPU执行时间与内存占用；
8. 应用：列出所有的资源，以及HTML5的Database和LocalStore等，你可以对存储的内容编辑和删除；
9. 安全：显示这个网站的安全性，查看有效的证书。