打开devtools方式
F12 或者 右键浏览器页面空白处选 '检查'
![](https://i-blog.csdnimg.cn/blog_migrate/8d1d905ed80f393c9b08330aa5579832.png)
Elements
查看调试html标签和css样式
选择元素
点击红色方框内标识后, 可以再页面或者代码中选中元素
![](https://i-blog.csdnimg.cn/blog_migrate/7e3aad3804d6c5792a9a7c46c8025055.png)
切换移动端
点击devtools红色方框内标识后, 切换到移动开发模式
上方工具栏可以切换手机型号、屏幕像素尺寸、缩放比例、是否网速限制选项
![](https://i-blog.csdnimg.cn/blog_migrate/969378dfee7b677cba2bbca1b389948d.png)
调试css样式
选中元素后会展示标签的样式styles, 可以进行新增和修改样式实时调试页面样式
![](https://i-blog.csdnimg.cn/blog_migrate/eff23c02f4bd44b4fc326981f1501469.png)
Console
控制台, 打印数据, 展示警告和错误
message 同时展示所有信息
errors 展示报错信息
warnings 展示警告信息
info 展示打印信息
![](https://i-blog.csdnimg.cn/blog_migrate/6b4b2d515dc3071b3c61cc0d5ce1ed7a.png)
Sources
资源, 打断点调试源码
![](https://i-blog.csdnimg.cn/blog_migrate/632b1e5dcc6425fd4e467daeab52ac09.png)
调试压缩后的代码
![](https://i-blog.csdnimg.cn/blog_migrate/5f1f3dc6b85e31327c4218af7809c10b.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ab93098928c00ceb8c817388037c0cab.png)
Network
资源和网络请求
搜索框 搜索筛选请求路径
筛选按钮 对请求类型进行筛选
No throttling 是否网速限制选项
![](https://i-blog.csdnimg.cn/blog_migrate/2b54e3fb965501f7b87f7ba5ec5ee9cf.png)
点击某请求查看具体请求信息
Headers 请求头
Preview 响应预览
Reponse 响应数据
![](https://i-blog.csdnimg.cn/blog_migrate/bbd0566fb599640c8beb6480de5be115.png)
Application
应用, 本地存储
Local Storage 本地存储, 永久存储
Session Storage 会话存储, 页面关闭清空
数据都以key - value 键值对存储, 数据类型是json
![](https://i-blog.csdnimg.cn/blog_migrate/5945d343cba0c4ab87f214910a3abdc2.png)