1. elements 元素查看
-
选中某个元素 查看其样式
image.png
-
-
直接调试修改样式
image.png
-
-
-
选中元素右击
image.png
- 给元素添加属性 例如id class 等
- 复制元素
- 删除元素
- forcestate:添加 active :hover 样式
-
-
- 将元素存储为全局变量 store as global variable
- image.png
- 此时可以通过temp1 对元素进行访问与一些操作
-
- styles
- image.png
- 可以进行样式的调试
- 可以通过filter 直接进行类的筛选
-
- computed 实际计算出来的样式
- image.png
- 有时候样式没有达到想要的效果,可以在这里查看并查找原因
-
- event listener
- image.png
- 绑定的dom事件
-
8）rendering
可以查看每次重绘的内容
image.png
image.png
2. console
-
-
信息查看
image.png
- 可以选择对应的信息类型,进行信息的过滤
- 主要是进行网络请求信息的查看
-
-
打印信息选择
image.png
-
-
3）选中元素在控制台可以通过$0直接访问该元素
image.png -
$_ 访问上次控制台打印的输出
image.png
-
-
5）console.count
通过直接调用可以查看调用次数
image.png
3. network
-
查看请求
image.png
-
-
-
headers
image.png
- 可以查看请求头信息与响应头信息状态码,请求方法等
- 当页面显示信息有误或者不能正常响应时,查看请求是否有问题
-
当与后端进行协作时,部分时候可能需要curl给后端,后端去查找问题原因
image.png
-
-
-
payload
image.png
- 请求参数
- 可以通过 view source 请求代码格式
-
-
-
preview
image.png
- 按照对象形式进行数据的查看
-
-
-
response
image.png
- 相应数据的原始格式
-
-
-
initiator
image.png
- 请求发出所在文件
- 在开发中,当有部分接口报错,导致页面不能正常显示,影响自己的开发的时候,可以注释掉别人的部分请求代码,继续自己的开发
-
-
7)Timing
image.png- 可以查看请求返回的具体时间
- 根据请求时间进行对应的优化
- 可以看出大部分时间处于等待服务器响应
-
-
cookies
image.png
- 请求所携带的一些cookie信息
-
- 网速慢速模拟
image.png
4. memory
image.png
- 查看网页内存占用
5. application
image.png
- 主要进行localStorage/sessionStorage/cookies的查看与修改
- 部分情况调试的时候可以直接删除或者修改或者添加信息
- 比如账户登录后的token存储在这里,当调试需要重新登录的时候直接删除token
信息即可
6. sources
image.png
- 断点调试,程序查错的一大利器
