Chrome 浏览器不仅可以调试页面、JS、请求、资源、Cookie，还可以模拟手机进行调试等，为开发者提供了很多方便。Chrome 浏览器作为程序员的标配，在页面加载性能和调试方便有着优秀的表现，下面介绍Chrome 开发者工具面板功能。
Chrome 浏览器工具面板主要包含Elements 面板、Console 面板、Sources 面板、Network面板、Performance 面板、Memory 面板、Application 面板、Security 面板、Audits 面板等（点击键盘“F12”即可调取开发者工具面板）。
一、Elements 面板
可以查找网页源代码HTML 中的节点，可以实时编辑标签属性，鼠标选中的DOM 会在页面中显示标签名和margin、padding、width、height 等属性。也可以修改页面中的样式属性，且能在浏览器里面实时得到反馈，调试前端代码非常方便。
二、Console 面板
可以记录开发过程中的日志信息，也可以作为与JS 进行交互的命令行Shell（执行JS 代码），也可以进行数学运算。
三、Sources 面板
可以设置断点调试，如果当前代码经过压缩，可以点击下方的花括号{}来增强可读性。
四、Network 面板
可以看到页面向服务器请求了哪些资源、资源的大小，加载资源花费的时间，以及哪些资源加载失败。此外，还可以查看HTTP 的请求头，返回内容等（请求、响应、入参、出参）。
五、Performance 面板（原名Timeline）
它的作用就是记录与分析应用程序运行过程中所产生的活动，更多的是用在性能优化方面。
六、Memory 面板
堆栈快照、JavaScript 函数内存分配、隔离内存泄漏。(www.xing528.com)
七、Application 面板
记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。
八、Security 面板
可以去调试网页安全和认证等问题，确保用户的网站上实现HTTPS（判断网页安全性），点击View Certificate 可以查看证书信息（颁发给、颁发者、证书有效期）。
HTTPS 和HTTP 的区别主要为以下四点：
（1）HTTPS 协议需要到CA 申请证书，一般免费证书很少，需要交费。
（2）HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的SSL 加密传输协议。
（3）HTTP 和HTTPS 使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
（4）HTTP 的连接很简单，是无状态的；HTTPS 协议是由SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比HTTP 协议安全。
九、Audits 面板
对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS 文件等。
选中“Network Utilization”“Web Page Performance”，点击“Run”按钮，将会对当前页面进行网络利用率和页面的性能优化作出诊断，并给出相应的优化建议。
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
