这是我参与「第四届青训营 」笔记创作活动的的第6天
前端bug的特点
1 多平台：浏览器、nodejs、桌面应用
2 多环境：本地开发环境、线上开发环境
3 多工具：Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole
4 多技巧：Console、BreakPoint、SourceMap、代理
Chrome DevTools
Elements模块
动态修改元素和样式
-
点击 .cls 开启动态修改元素的 class
-
输入字符串可以动态的给元素添加类名
-
勾选/取消类名可以动态的查看类名生效效果
-
点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
-
Computed 下点击样式里的箭头可以跳转到 styles 面板中的 css 规则
-
可以用以下2种方法强制激活伪类
- 选中具有伪类的元素，点击 :hov
- DOM 树右键菜单，选择 Force State
Console模块
常用调试代码：
- console.log：输出
- console.warn：向web输出的警告消息
- console.error：报错，最烦的玩意，有时候不出也烦
- console.debug：当控制台配置为显示调试输出时，该消息会显示给用户。
- console.table：展示JSON和数组数据
- console.dir：展示对象属性，方便找到我们需要的属性及属性值
Source模块
- 使用关键字debugger或代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开 Breakpoints 列表可以查看断点列表，勾选／取消可以激活／禁用对应断点
- 暂停状态下，鼠标 hover可以查看变量的值变量
- 在调试器 Watch右侧点击＋可以添加对变量的监控，查看该变量的值
- 展开Scope 可以查看作用域列表（包含闭包）
- 展开 Call Stack 可以查看当前javaScript 代码的调用栈
Network模块
说来话长，来日方长再细说
Application模块
Application 面板展示与本地存储相关的信息
- Local Storage
- Session Storage
- IndexedDB
- Web SQL
- Cookie
Ps：点击Application下的Stroage 面板中的 Clear Site Data可以清楚网页的本地存储数据
移动端H5调试
真机调试
iOS
- 使用 Lightning 数据线将 iPhone 与 Mac 相连
- iPhone 开启 Web 检查器(设置 -> Safari -> 高级 -> 开启 Web 检查器)
- iPhone 使用 Safari 浏览器打开要调试的页面
- Mac 打开 Safari 浏览器调试(菜单栏 —> 开发 -> iPhone 设备名 -> 选择调试页面)
- 在弹出的 Safari Developer Tools 中调试
没有 iPhone 设备可以在 Mac App Store 安装 Xcode 使用其内置的 iOS 模拟器
Android
- 使用 USB 数据线将手机与电脑相连
- 手机进入开发者模式，勾选 USB 调试，并允许调试
- 电脑打开 Chrome 浏览器，在地址栏输入:chrome://inspect/#devices 并勾选 Discover USB devices 选项
- 手机允许远程调试，并访问调试页面
- 电脑点击 inspect 按钮
- 进入调试界面
VConsole
- 日志(Logs)：console.log|info|error|..
- 网络(Network)：XMLHttpRequest,Fetch, sendBeacon
- 节点(Element):：HTML 节点树
- 存储(Storage): Cookies,LocalStorage, SessionStorage
- 手动执行 JS 命令行
- 自定义插件
