Chrome调试器

做为一个前端开发，chrome应该是使用最多的啦，chrome对前端页面的调试，简直不要太爽，在这里介绍一下chrome调试js的工具，可以协助我们进行开发工作，加快开发效率。

1.首先，打开chrome，然后打开调试功能栏，按快捷键或者ctrl+shift+j，就可以打开chrome的开发者工具。打开后页面如下所示。

image.png

2.下面主要介绍一下开发者工具中常用的几个基础常用的功能。左上角两个选项，可以切换手机页面的。如果我们访问的网站是手机端WEB页面，则可以点击这个按钮，就可以模拟手机进行访问了。

image.png
3.Network是网络工具，可以查看请求数据的状态，类型，大小，时间等，这个应该是web开发很常用的啦，作为和后端的互怼的重要工具，这个可以查看发送请求，发送的数据，请求头等等XmlHttpRequest的很多信息
image.png

4.Sources可以用来查看页面的源代码，包括js文件和html文件。找到想要调试的js代码，在代码前单击，即可以设置断点。当运行js代码时，会自动进入到断点执行。同后端调试一样，js调试也可以单步运行、进入函数体内调试，直接运行到下一个断点等。

image.png
5.如上图所示，右上角四个断点，分别是直接运行到下一个断点、单步运行、进入函数体内，返回函数执行结果。对应的快捷键分别是F8、F10、F11和shift+F11。在调试时，把鼠标放在某个变量上，就可以查看该变量的运行值。
6.Security标签页 可以去调试当前页面的安全和认证等问题并确保你已经在你的网站上正确的实现了HTTPS。

HTTP(Hyper Text Transfer Protocol over Secure Socket Layer),是安全为目标的HTTP的通道，简单的讲就是HTTP的安全版。即HTTP下加入SSL层。它是一个URL scheme（抽象标识符体系），句法类同http：体系。用于安全的HTTP数据传输。https:URL表明它使用了HTTP，但HTTPS存在不同于HTTP的默认端口及一个加密/身份验证层（在HTTP和TCP之间）。

HTTPS和HTTP的区别主要为以下四点
①HTTPS协议需要到CA申请证书，一般免费的比较少，需要交费。
②HTTP是超文本传输协议，信息是明文传输，HTTPS则是具有安全性的SSL加密传输协议。
③HTTP和HTTPS使用的是完全不同的连接方式，使用的端口号也不一样，前者是80，后者是443.
④HTTP的连接很简单，是无状态的，HTTPS协议是由SSL和HTTP协议构建的可以加密传输、身份认证的网络协议，比HTTP协议安全。

7.Audits标签页 可以帮你分析页面性能，有助于优化前端页面，分析后得到的报告
8.Application标签页 主要是记录网站加载的资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、WEB SQL、cookie）、缓存数据、字体图片、脚本、样式等等。
9.Performance标签页 这个就比较厉害啦，前端的性能优化

image.png

第一个模板是点击开始录制，停止，清空。
第二个模板右侧提示FPS（帧频，流畅度），CPU的消耗，NET，HEAP（javaScript堆内存）

1.FPS。每秒帧数。绿色竖线越高，FPS越高。FPS图表上的红色块表示长时间帧，很可能会出现卡顿
2.Cpu CPU资源
3..NET每条彩色横杆表示一种资源，横杆越长，检索资源所需要的时间越长，每个横杆的浅色部分表示等待时间（请求资源到第一个字节下载完成时间）
HTML文件是蓝色。脚本是黄色。样式是黄色。媒体文件是蓝色。其他资源是灰色。
4.底下的summary，Deteils，选择时间显示该事件相关的信息，为选择时间时，次窗格会显示选定时间范围的相关信息。
细节：保证录制的文件很纯粹（简短，没有不必要的操作，停止浏览器缓存，停用扩展程序（使用隐身登录））

第三个模块（火焰图）（第二个模块可以控制范围选择读取网页过程中的页面）（蓝线代表DOMContentLoaded事件，绿线首次绘制的时间，红线代表load事件）