这是我参加【第五届青训营】笔记创作活动的第9天
前端Debug
-
多平台： 浏览器、Hybrid、NodeJS、小程序、桌面应用等
-
多环境： 本地开发环境、线上环境
-
多工具： Chrome devTools、Charles....
-
多技巧：Console、BreakPoint...
Chrome DevTools
F12
Element
-
点击 .cls 开启动态修改元素的 class
-
输入字符串可以动态的给元素添加类名
-
勾选/取消类名可以动态的查看类名生效效果
-
点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览 Computed 下点击样式里的箭头可以跳转到styles面板中的 css 规则
可以用以下两种方式强制激活伪类
- 选中具有伪类的元素，点击
：hov - DOM树右键菜单，选择
Force State
console
移动端h5调试
真机调试
IOS
- 使用Lightning数据线将iPhone与Mac相连
- iPhone开启Web检查器
- iPhone使用Safari浏览器打卡要调试的页面
- Mac打开Safari浏览器调试
- 在弹出的Safari Developer Tools中调试
Android
- 使用USB数据线将手机与电脑相连
- 手机进入开发者模式，勾选USB调试，并允许调试
- 电脑打开Chrome浏览器，在地址栏输入：chrome://inspect/#devices 并勾选
Discover USB devices选项
- 手机允许远程调试，并访问调试页面
- 电脑点击inspect按钮
- 进入调试界面
常用开发调试技巧
-
线上即时修改Overrides
-
利用代理解决开发阶段的跨域问题
-
启用本地 source map
-
使用代理工具 Mock 数据
