最常用的chrome浏览器控制台的调试技巧，你看你知道不。

控制台打印vue实例$ 选中元素 输出$0就是当前元素

 

快速简洁法拿到元素 $

给元素添加类名

一次性展开所有的元素，不在一个一个的点了

 把整个网页给截图下来，而非可视区域，截取指定Dom元素

前后端联调后端要报错的接口和参数怎么给他

 

  

 控制台copy可以数据格式化json数据，也可以拷贝变量输出的数据这个很香的.

拷贝响应的数据结构

 搜索事件

网络请求 network的一些基本信息

Preserve log （保留）日志当需要记录页面刷新前后的 log 或者是页面跳转前后的 log 来进行对比调试的时候用

Disable catch 不缓存

Online 可以切换网速测试

Hide data Urls 隐藏数据

Url All 查看所有请求 xhr 查看xml的http的request

 

头信息的介绍

Access-Control-Allow-Origin: 请求头中允许设置的请求方法
content-type:  客户端发送的类型及采用的编码方式
Date:  客户端请求服务端的时间
keep-alive: 长连接
Last-Modified:  服务端对该资源最后修改的时间
Server:  服务端的web服务端名
Content-Encoding:  gzip 压缩编码类型
Transfer-Encoding:chunked:  分块传递数据到客户端
Accept: 客户端能接收的资源类型
Accept-Encoding:  客户端能接收的压缩数据的类型
Accept-Language:  客户端接收的语言类型
Authorization:  配置token字段的
Cache-Control: no-cache 服务端禁止客户端缓存页面数据
Connection: keep-alive 维护客户端和服务端的连接关系
Cookie:客户端暂存服务端的信息
Host:  连接的目标主机和端口号
Pragma: no-cache 服务端禁止客户端缓存页面数据
Referer:  来于哪里(即从哪个页面跳转过来的)
User-Agent:  客户端版本号的名字

让网速慢一点

 重新发送请求，你看你知不知道，（控制台发送请求  2，3张图片）

还有打断点的部分，框架用不好，单纯js代码还好

快速的恢复关闭浏览器之前打开的页签

后续还会更新...