打开devtools方式
F12 或者 右键浏览器页面空白处选 '检查'
![](https://img-blog.csdnimg.cn/img_convert/7090cc7828cb9533a344c0a142f96049.webp?x-oss-process=image/format,png)
Elements
查看调试html标签和css样式
选择元素
点击红色方框内标识后, 可以再页面或者代码中选中元素
![](https://img-blog.csdnimg.cn/img_convert/845017baa8e6777d25827266a866bf26.webp?x-oss-process=image/format,png)
切换移动端
点击devtools红色方框内标识后, 切换到移动开发模式
上方工具栏可以切换手机型号、屏幕像素尺寸、缩放比例、是否网速限制选项
![](https://img-blog.csdnimg.cn/img_convert/8690ef089d62e0d8980509245ba3f825.webp?x-oss-process=image/format,png)
调试css样式
选中元素后会展示标签的样式styles, 可以进行新增和修改样式实时调试页面样式
![](https://img-blog.csdnimg.cn/img_convert/6feb85c4b252ad3f26c9cba22683e8ec.webp?x-oss-process=image/format,png)
Console
控制台, 打印数据, 展示警告和错误
message 同时展示所有信息
errors 展示报错信息
warnings 展示警告信息
info 展示打印信息
![](https://img-blog.csdnimg.cn/img_convert/fea219d469a11b0925f7ba5a55ee3e40.webp?x-oss-process=image/format,png)
Sources
资源, 打断点调试源码
![](https://img-blog.csdnimg.cn/img_convert/5b2651e4788369a5c1b6b30e51a1661c.webp?x-oss-process=image/format,png)
调试压缩后的代码
![](https://img-blog.csdnimg.cn/img_convert/4d7197bb502e9f2150534c72be6e8cc1.webp?x-oss-process=image/format,png)
![](https://img-blog.csdnimg.cn/img_convert/045506e7feeda2b2f6629676566b1f29.webp?x-oss-process=image/format,png)
Network
资源和网络请求
搜索框 搜索筛选请求路径
筛选按钮 对请求类型进行筛选
No throttling 是否网速限制选项
![](https://img-blog.csdnimg.cn/img_convert/92ee0ea30ebfa7c5f65c5be2ce637271.webp?x-oss-process=image/format,png)
点击某请求查看具体请求信息
Headers 请求头
Preview 响应预览
Reponse 响应数据
![](https://img-blog.csdnimg.cn/img_convert/c4e137f74854b91340e5dfac86bc7da4.webp?x-oss-process=image/format,png)
Application
应用, 本地存储
Local Storage 本地存储, 永久存储
Session Storage 会话存储, 页面关闭清空
数据都以key - value 键值对存储, 数据类型是json
![](https://img-blog.csdnimg.cn/img_convert/794993e85ad9fd1d237ea0f813317f47.webp?x-oss-process=image/format,png)