这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天
PC端
Chrome
Element
页面元素节点区域
调试样式，可以通过force state强制激活伪类
console
页面打印区域
console.table表格形式打印JSON、数组
console.dir文件数形式展示对象属性
console.time
占位符：给日志添加样式，%s，字符串占位符；%o，对象占位符；%c，样式占位符；%d，数字占位符
sources
页面源代码区域
debugger
打包压缩后：sourcemap
network
网络请求相关
弱网环境模拟 slow 3G，所有页面资源
application
页面存储相关
storage、cookies...
performance
网页性能相关
frame rendering stats
lighthouse
页面性能分析
移动端
devtools：chrome内置调试工具，（比较适合调试安卓）
步骤：开启开发中模式和USB调试，将数据线连接电脑和手机。手机打开调试页面，chrome打开devtools链接（需在chrome中打开）找到要调试的页面。
Mac to iOS safari：使用iphone用数据线连接mac访问safari进行调试（比较简便）
Charles
charles是个抓包代理工具，mock工具。https需要证书签名
charles抓包
- 安装charlescharles官网
- 打开charles，开启proxy模式
- 在手机wifi配置中设置电脑ip地址作为代理，默认端口8888
- charles弹出是否允许接入，点击allow
- https请求需要将电脑添加charles证书，信任charles root CA
- 设置手机证书
- 手机浏览器打开chls.pro/ssl下载
- 手机设置 => 通用 => 关于 => 证书信任设置
mock本地文件
- 在charles找到mock的接口或网络请求，右键选择map local
- Map To里选择mock的文件路径，一般为json格式
- 随意修改mock数据内容进行mock
mock远程
- 在charles找到mock的接口或网络请求，右键选择map romote
- 配置Map To将host指向远程url
- 进行mock远程请求
vconsole
Node Web
Node Vscode
总结
开发调试是我们前端程序员绕不开的话题，掌握了开发调试的各类方法有利于我们在开发中提效，快速分析问题出现的原因和解决方案
