## 一、概述 F12调试是Chrome提供的前端调试工具；  ## 二、介绍 包括了很多功能栏目，包括Elements、Console、Sources、Network、Performance、Memory、Application、Security、Audits共9个； **Elements**：于查看或修改HTML元素的属性、CSS属性、监听事件、断点等； **Console**：控制台一般用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息。 **Sources**：该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码，此外最重要的是可以调试JavaScript源代码，可以给JS代码添加断点等。 **Network**：网络页面主要用于查看header等与网络连接相关的信息； **Performance**：检测页面性能； **Memory**：检测内存的情况； **Application**：该面板主要是记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。 **Security**：通过该面板你可以去调试当前网页的安全和认证等问题并确保您已经在你的网站上正确地实现HTTPS。 **Audits**：对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等； ## 三、静态观察 在Console选项中，可以看到conolse输出的数据项；  在Network选项中，通过选择请求地址，看到当前请求的详细信息（Network-Headers）；  ## 四、动态调试 可以支持直接在console中，输入参数，动态改变页面数据，实时看到效果：