概述
在日常开发过程中，在开发不同平台时，都会经过调试的过程，
- React/Vue
- Flutter
- React Native
- Electron
各种平台的开发，都需要调试
web端调试
- 点击.cls 开启动态修改元素的class
- 输入字符串可以动态的个元素添加类名
- 勾选/取消类型可以动态的查看类名生效的效果
- 点击具体的样式，可以进行编辑，浏览器内容区域实时预览
- Computed下点击样式里的箭头可以跳转到styles面板中的css规则
二、Consloe
- console.log
- console.wran
- console.info
- console.error
- console.debug
- console.table 可以打印表格，传入的需要是对象形式 三、Score Tab
区域1： 页面资源文件目录树
区域2： 代码预览区域
使用关键字debugger 或者代码预览区域的行号可以设置断点， 执行到断点，代码自动停止，
区域3： Debug工具栏
区域4： 断点调试器
四、 压缩后的代码如何调试
- Source Map
五、 NetWork
区域1：控制面板
区域2：过滤面板
区域3：概览面板
区域4：Request Table面板
区域5： 总结面板
区域6： 请求详情面板
六、 Application
展示与本地存储相关的东西
- Local Storage
- Session Storage
- IndexedDB
- Web SQL
- Cookie
移动端调试
IOS上
-
使用 Lightning 数据线将iPhone 与 Mac 相连
-
iPhone 开启 Web 检查器 (设置-> Safari -> 高级-> 开启 Web 检查器)
-
iPhone 使用Safari 浏览器打开要调试的页面
-
Mac 打开 Safari 浏览器调试(莱单栏-> 开发-> iPhone 设备名 -> 选择调试页面
-
在弹出的 Safari Developer Tools 中调试
Andiroid
-
使用 USB 数据线将手机与电脑相连
-
手机进入开发者模式，勾选 USB 调试，并允许调试
-
电脑打开 Chrome 浏览器，在地址栏输入: chrome://inspect/#devices 并勾选 Discover USB devices 选项
-
手机允许远程调试，并访问调试页面
-
电脑点击inspect 按钮
-
进入调试界面
使用代理工具调试
电脑作为代理服务器
手机通过 HITTP 代理连接到 电脑
手机上的请求都经过代理服务器
以 Charles 为例:
- 安装 Charles
- 查看电脑IP 和端口
- 将IP、端口号填入手机 HHIIP 代理
- Charles 允许授权
- 使用 SwitchHosts! 软件给 Mac 电脑配 Hosts
- 手机访问开发环境页面
常用的代理工具：
- Charles 适合查看，控制网络请求。分析数据
- Fiddler 与Charles类似，适用于windows平台
