这是我参与「第四届青训营 」笔记创作活动的的第5天
Bug与Debug
Bug产生的可能原因
- 需求表述、理解、编写引起的错误
- 系统设计架构引起的错误
- 开发过程缺乏有效的沟通级监督，甚至没有沟通或监督
- 程序员编程中产生错误
- ......
前端Debug的特点
- 多平台（浏览器、Hybrid、NodeJs、小程序、桌面应用......）
- 多环境（本地开发环境、线上环境）
- 多工具（Chrome devTools、Charles、......）
- 多技巧（Console、BreakPoint、代理......）
Chrome DevTools
动态修改元素和样式
- 点击.cls开启动态修改元素的class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
- Computed下点击样式里的箭头可以跳转到styles面板中的css规则
Debug工具栏
从左至右分别为暂停（继续）、单步跳过、进入函数、跳出函数、单步执行、激活（关闭）所有断点、代码执行异常处自动
断点调试器
BreakPoint与Wacth
- 使用关键字debugger或代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开BreakPoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
- 暂停状态下，鼠标hover变量可以查看变量的值
- 在调试器Watch右侧点击+可以添加对变量的监控，查看该变量的值
移动端H5调试
真机调试
ios
- 使用Lightning数据线将iPhone与Mac相连
- iPhone开启web检查器
- iPhone使用safari浏览器打开要调试的页面
- Mac打开safari浏览器调试
- 在弹出的safari developer tools中调试
Android
- 使用USB数据线将手机与电脑连接
- 手机进入开发者模式，勾选USB调试，并允许调试
- 电脑打开Chrome浏览器，在地址栏输入：chrome://inspect/#devices 并勾选Discover USB device选项
- 手机允许远程调试，并访问调试页面
- 电脑点击inspect按钮
- 进入调试界面
使用代理工具调试
常用代理工具
Charles：适合查看、控制网络请求、分析数据 Fiddler：与Charles类似，适合windows平台 spy-debugger：远程调试手机界面，抓包 Whistle：基于Node实现的跨平台Web调试代理工具
NodeJs调试
Inspector Protocol +Chrome Devtool
- 执行命令 node --inspect=8888 index.js
- chrome浏览器访问服务
- 点击绿色node图标打开node调试面板
- 在node调试面板中使用断点调试
Inspector Protocol+VS code
VS code点击运行、添加配置、启动调试、添加断点、查看变量、堆栈
常用开发调试技巧
线上即时修改Overrides
- 打开Sources面板下的Overrides
- 点击Select folderds for Overrides，选择一个本地的空文件夹目录
- 允许授权
- 在page中修改代码，修改完成后command+s保存
- 打开devTools,点击右上角的三个小点->More tools->Changes，就能看到所有修改了
总结
以上就是我今天所学习到的前端开发的调试知识，如有不妥，希望各位大神指出，定当虚心接受😆
