开发者工具F12指南

开发者工具F12指南

1. 打开方式
   快捷键：shift+ctrl+i或者F12，在页面上右键–》检查，打开开发者工具
   

2. 各功能简介

3. 

4. 

1.1. 元素（Elements）
用来查看或修改网页的html元素属性、css属性、监听事件或断点
1.2. 控制台（Console）
一般用于执行一次性代码，查看javascript对象，查看调试日志信息或异常信息
1.3. 源代码（Sources）
用于查看页面的html文件源代码、javascript源代码、css源代码，可以调试javascript源代码，增加断点
1.4. 网络（Network）
用于查看header等与网络连接相关的信息
1.5. 性能面板（Performance）
可以记录和分析应用在运行时的所有活动，性能相关
1.6. 内存面板（Memory）
了解页面当前正在使用的内存量，使用 Timeline 记录可视化一段时间内的内存使用。使用堆快照确定已分离的 DOM 树（内存泄漏的常见原因）。使用分配时间线记录了解新内存在 JS 堆中的分配时间
1.7. 应用面板（Application）
查看和修改本地存储与会话存储。
检查和修改 IndexedDB 数据库。
对 Web SQL 数据库执行语句。
查看应用缓存和服务工作线程缓存。
点击一次按钮即可清除所有存储、数据库、缓存和服务工作线程。
1.8. 安全面板（Security）
使用 Security Overview 可以立即查看当前页面是否安全。
检查各个源以查看连接和证书详情（安全源）或找出具体哪些请求未受保护（非安全源）
1.9. Lighthouse
当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议
TOC](这里写自定义目录标题)