这是我参与「第五届青训营 」笔记创作活动的第八天
一、重点内容
- Elements
- Console
- Source
- Performance
- Network
- 真机调试
- 代理调试
- 常用工具
二、详细内容
1、Bug与Debug
Bug产生
Debug特点
- 多平台： 浏览器、Hybrid、NodeJs、小程序、桌面应用等
- 多工具： Chrome devTools、 Charles、 Spy-Debugger、Whistle、vConsole
- 多环境： 本地开发环境、线上环境
- 多技巧： Console、BreakPoint、 sourceMap、代理等
2、Chrome DevTools
Console
Sorce Tab
Network
Application
Performance
Lighthouse
3、移动端H5调试
真机调试
-
iOS
- 使用 Lightning 数据线将 iPhone 与 Mac 相连
- iPhone 开启 Web 检查器 (设置 -> Safari ->高级 -> 开启 Web 检查器)
- iPhone 使用 Safari 浏览器打开要调试的页面
- Mac 打开 Safari 浏览器调试 (菜单栏-> 开发> iPhone 设备名 -> 选择调试页面)
- 在弹出的 Safari Developer Tools 中调试
-
Android
- 使用 USB 数据线将手机与电脑相连
- 手机进入开发者模式，勾选 USB 调试，并允许调试
- 电脑打开 Chrome 浏览器，在地址栏输入: chrome://inspect/#devices 并勾选 Discover USB devices 选项
- 手机允许远程调试，并访问调试页面
- 电脑点击 inspect 按钮
- 进入调试界面
VConsole
使用代理工具调试
原理
- 电脑作为代理服务器
- 手机通过 HTTP 代理连接到电脑
- 手机上的请求都经过代理服务器
以 Charles 为例
- 1.安装 Charles
- 2.查看电脑IP 和 端口
- 3.将 IP、端口号填入手机 HTTP 代理
- 4.Charles 允许授权
- 5.使用 SwitchHosts!软件给 Mac 电脑配 Hosts
- 6.手机访问开发环境页面
常用代理工具
4、Node.js调试
Inspector Protocol + Chrome Devtoo
- 执行命令node --inspect=8888 index.js
- chrome 浏览器访问服务
- 点击绿色 node 图标打开 node 调试面板在chrome://inspect/#devices 中配置network target)
- 在 node 调试面板中使用断点调试
lnspector Protocol + VS Code
- VS Code 点击运行
- 添加配置
- 启动调试
- 添加断点
- 查看变量、堆栈
5、常用开发调试技巧
线上即时修改 Overrides
- 打开 Sources 面板下的的Overrides
- 点击 Select folders forOverrides。选择一个本地的空文件夹目录。
- 允许授权
- 在 page 中修改代码，修改完成后 command +s 保存
- 打开 devTools ，点击右上角的三个小点 -> More tools -> Changes,就能看到所有修改了
利用代理解决开发阶段的跨域问题
启用本地 source map
使用代理工具 Mock 数据
- 右键选中要 mock 数据的接口，选保存文件到本地。择save response，
- 本地打开保存的文件，编辑想mock 的数据并保存。
- 右键选中第一步的接口，选择Map Local，Local Path 选择第二步的文件。
小黄鸭调试
《程序员修炼之道》
传说中程序大师随身携带一只小黄鸭，在调试代码的时候会在桌上放上这只小黄鹏，然后详细地向鸭子解释每行代码，然后很快就将问题定位修复了。
三、课后总结
1、调试是前端必不可少的一部分知识 2、学习到了调试方法 3、学习到了Chrome DevTools：Elements、Console、Source、Performance、Network
