F12常用于网站界面测试、调试，分析网页所出现的问题，查看html元素、查看响应事件等方面。打开一个网页，点击F12，弹出一个窗口，其窗口的功能如下:
元素（Elements）
- 查看元素的代码：点击左上角的箭头图标（或按快捷键Ctrl+Shift+C）进入选择元素模式，然后从页面中选择需要查看的元素，然后可以在开发者工具元素（Elements）一栏中定位到该元素源代码的具体位置。
- 查看元素的属性：定位到元素的源代码之后，可以从源代码中读出改元素的属性。
- 给元素添加断点：在元素的右键菜单中选择断点选项（Break on…），选中之后，当元素被修改（通常是被JS代码修改）时，页面加载会暂停，然后可以查看该元素的属性。元素断点添加之后，可以在右侧栏的DOM Breakpoints页面中看到，这个页面可以看到当前网页的所有元素断点。
- 查看元素的监听事件：元素的右边栏的Event Listener页面，可以查看到该元素的所有监听事件。在开发中，尤其是维护其他人的代码时，会出现不了解元素对应的监听事件，这个时候，可以在这个页面中找到。这个页面不仅能看到对应的事件函数，还可以定位该函数所在的JS文件以及在该文件中的具体位置（行数）。
控制台（Console）
- 当网页的JS代码中使用了console.log( )函数时，该函数输出的日志信息会在控制台中显示。日志信息一般情况下是测试开发工程师在测试调试时启用，而在正式上线后，一般会将console.log( )函数去掉。
- 在测试界面时，如果出现Bug问题，一般情况下会在这栏展示，查看调试日志信息或者异常错误信息，然后前端开发工程师根据具体问题来调试，进行解决问题。
源代码（Sources）
- 当前打开的网页界面所涉及到的所有源代码都会出现在该栏，包括：样式、css、图片、js文件等。
网络（Network）
- Name/Pat：资源名称以及URL路径（main.css）
- Method：Http请求方法(GET或者POST)
- status/Text：Http状态码/文字解释（200，ok）
- Type ：请求资源的MIME类型，MIME是Multipurpose Internet Mail Extensions (html,css,js等)
- Initiator：解释请求是怎么发起的，有四种可能的值
1.Parser ：请求是由页面的html解析时发送
2.Redirect：请求是由页面重定向发送
3.script ：请求是由script脚本处理发送
4.other ：请求是由其他过程发送的，比如页面里的Link链接点击
- size/content：size是响应头部和响应体结合的大小，content是请求解码后的大小
