这是我参与「第四届青训营 」笔记创作活动的第七天
1. 关于Bug和Debug
1.1 前端Dubug的特点
多平台
- 浏览器
- Hybrid
- NodeJs
- 小程序
- 桌面应用
- ...
多环境
- 本地开发环境
- 线上环境
多工具
- Chrome
- DevTools
- Charles
- Spy-Debugger
- Whistie
- vConsole
- ...
多技巧
- Console
- BreakPoint
- SourceMap
- 代理
2. Chrome DevTools
2.1 动态修改元素和样式
在网页中按下f12，打开element，就可以看到每个元素的样式了
强制激活伪类的方法：
- 选中具有伪类的元素，点击：hov
- Dom树右键菜单，选择Force State
2.2 scope与call Stack
- 展开scope可以查看作用域列表（包括闭包）
- 展开Call Slack可以查看当前JavaScript代码的调用栈 这是我参与「第四届青训营 」笔记创作活动的第七天
2.3 application
点击左侧apploacation下的Stoage面板中的clear site data可以清除网页的本地储存数据
3. 移动端H5调试
3.1 真机调试
iOS
- 使用Lighting数据线将iphone与Mac相连接
- Iphone开启Web检查器（设置->Safary->高级->开启web检查器）
- iPhone使用safari浏览器打开要调试的页面
- mac打开safari浏览器调试（菜单栏->开发->iPhone设备名->选择调试页面）
- 在弹出的Safari Developer Tools中调试
ps：如果没有iPhone设备的话可以在mac 的apple store中下载安装Xcode使用其内置的iOS模拟器
安卓
- 使用usb数据线将手机与电脑连接
- 手机进入开发者模式，勾选usb调试，并允许调试
- 电脑打开chrome浏览器，，在地址栏输入一串字符允许调试
- 手机允许远程调试，并访问调试页面
- 电脑点击inspect按钮
- 进入调试页面
ps:其实可以直接使用手机扫码查看，体验更佳
4. 小黄鸭调试大法
传说中程序大师随身携带一只小黄鸭，在调试代码的时候会在桌子上放这只小黄鸭，然后详细的向鸭子解释每行代码，然后很快就将问题定位修复了。---《程序员修炼之道》
