测试中开发者工具F12使用

元素（Elements）

• 查看元素的代码：点击左上角的箭头图标（或按快捷键Ctrl+Shift+C）进入选择元素模式，然后从页面中选择需要查看的元素，然后可以在开发者工具元素（Elements）一栏中定位到该元素源代码的具体位置。
  查看元素的属性：定位到元素的源代码之后，可以从源代码中读出改元素的属性。
  

• 给元素添加断点：在元素的右键菜单中选择断点选项（Break on…），选中之后，当元素被修改（通常是被JS代码修改）时，页面加载会暂停，然后可以查看该元素的属性。元素断点添加之后，可以在右侧栏的DOM Breakpoints页面中看到，这个页面可以看到当前网页的所有元素断点。

• 查看元素的监听事件：元素的右边栏的Event Listener页面，可以查看到该元素的所有监听事件。在开发中，尤其是维护其他人的代码时，会出现不了解元素对应的监听事件，这个时候，可以在这个页面中找到。这个页面不仅能看到对应的事件函数，还可以定位该函数所在的JS文件以及在该文件中的具体位置（行数）。

控制台（Console）

• 查看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是请求解码后的大小

headers

一般请求的数据都在header内，当操作出现错误时，点击出现错误的请求方法，在右侧显示的内容中将token和json数据发给后台去查询修改。

response

记录点击事件时发生的响应，可查看该错误后台返回的错误信息。