使用chrome浏览器，F12打开浏览器调试工具

• element面板：查看修改html、css样式、定位修改元素位置
• console面板：控制台可以用来执行js代码、查看日志、报错、当前页面的对象如window对象

• sources面板：源码目录，在此页面下按ctrl+`键可以同时打开console，方便调试

  • 
  • 在sources下的console旁边有一个search功能，可以实现快速定位搜索内容对应的源码文件位置

• application面板：用来记录cookie、session、storage相关

  • 

• network面板：可以用来查看请求详细信息，如url、方法、状态、启动器、请求的响应内容

  • 可以用来筛选请求的类型、地址
  • 可以用来搜索请求的内容
  • 可以选择是否保存之前的请求日志
  • 
  • 这里详细介绍一下Initiator启动器，他的作用是可以查看在某个位置创建了该请求例如下图，可以查看到创建请求的js代码，一般是逆向入手之处：
  • 网络面板有自己的搜索栏，不同于底部的search，这个搜索栏是用来搜索请求的内容：
  •