这是我参与「第四届青训营 」笔记创作活动的的第8天
Bug与Debug
前端Bug的特点
- 多平台
- 多环境
- 多工具
- 多技巧
Chrome DevTools
动态修改元素和样式
- 点击.cls开启动态修改元素的class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
- Computed下点击样式里的箭头可以跳转到styles面板中的css规则 可以用以下2种方式强制激活伪类
- 选中具有伪类的元素，点击:hov
- DOM树右键菜单，选择Force State
Console
- console.log
- console.warn
- console.error
- console.debug
- console.info
- console.table 具像化的展示JSON和数组数据
- console.dir 通过类似文件树的方式展示对象的属性
- 占位符 给日志添加样式，可以突出重要的信息 %s：字符串占位符；%o：对象占位符；%c：样式占位符；%d：数字占位符
Sorce Tab
Break Point 与 Watch
Scope 与 Call Stack
Source Map
mappings字段存储了源文件和Source Map的映射
- 英文，表示源码及压缩代码的位置关联
- 逗号，分割一行代码中的内容
- 分号，代表换行
NetWork
移动端H5调试
真机调试
VConsole
使用代理工具调试
原理：
- 电脑作为代理服务器
- 手机通过HTTP代理连接到电脑
- 手机上的请求都经过代理服务器 以Charles为例：
- 安装Charles
- 查看电脑IP和端口
- 将IP、端口号填入手机HTTP代理
- Charles允许授权
- 使用SwitchHosts！软件给Mac电脑配Hosts
- 手机访问开发环境页面
