2021-10-20

进入浏览器开发者工具的两种方式

F12或者右键检查

1. Elements
   查看网页的源码，点击Elements来对网页的代码进行动态调试

   
   
   微信截图_20211020173319.png

可以上下移动div等等各种标签

image.png

2. Console
   查看网页的输出
   
   image.png
   
   1: 当前选择的节点的子节点

let msg = {}
console.log(object)
console.table(object)

image.png

3. Network
   查看网络的所有请求
   可以进行接口的一些调试比如状态

   
   
   image.png

4. Source
   应用到的所有资源
   如图片，视频等

   
   
   image.png

5.Memory
页面在执行中占用的内存

image.png

6.Application
查看程序用到的一些资源

image.png

7. Security
   查看网页的证书

   
   
   image.png

8. 其他折叠的
   可以查看第三方插件的使用