调试工具
1.开发人员工具
- 点击位于浏览器用户界面右上角的“页面”下拉菜单，“更多工具”→“开发人员工具”。
- 右键点击网页上的任一元素，在弹出菜单中选择“检查”（不同浏览器可能不一样）。
- 在 Windows操作系统上，使用 F12或Ctrl+Shift+I 快捷键打开开发人员工具（或使用 Ctrl+Shift+J 直接进入 JavaScript 控制台）。
- Cmd + Opl +I（Mac）
2.元素面板(Element)
该面板可以用来查看、修改、删除、禁用页面源代码HTML上的任意元素，包括DOM标签以及css样式的查看、修改、删除、禁用，还可以展示相关盒模型的图形信息，以及在浏览器上实时得到反馈。
4.源代码面板(Sources)
在源代码面板中可以设置断点来调试 JavaScript ，或者通过Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器。
5.网络面板(Network)
可以看到所有的资源请求，包括网络请求，图片资源，html,css，js文件等请求，可以根据需求筛选请求项，一般多用于网络请求的查看和分析，分析后端接口是否正确传输，获取的数据是否准确，请求头，请求参数的查看。
6.性能面板(Performance)
使用性能面板可以通过记录和查看网站生命周期内发生的各种事件来提高页面的运行时性能
7.内存面板(Memory)
如果需要比性能面板提供的更多信息，可以使用内存面板，例如跟踪内存泄漏
8.应用面板(Application)
该面板可以检查、修改、删除IndexedDB与Web SQL数据库，本地和会话存储，cookie，应用程序缓存，图像，字体和样式表。 点击一次按钮即可清除所有存储、数据库、缓存和服务工作线程。
9.安全面板(Security)
使用 Security Overview 可以立即查看当前页面是否安全。 检查各个源以查看连接和证书详情（安全源）或找出具体哪些请求未受保护（非安全源）。
10.检查面板(Audits)
对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议
