这是我参与「第四届青训营」笔记创作活动的的第8天

bug与Debug

前端bug的特点

• 多平台
• 多环境
• 多工具
• 多技巧

Chrome DevTools

动态修改元素和样式

.点击.cls开启动态修改元素的class .输入字符串可以动态的给元素添加类名 .勾选/取消类名可以动态的查看类名生效效果

Console

日志技巧：

console.log：正常日志，黑色

console.warn：在信息传递之前会打印出一个三角形的警告符号。

console.error：在信息传递前打印出一个危险符号。

console.debug：

console.info：提示信息

console.table：具象化展示json和数组数据，把传递给它的输入格式化为表格，然后在表格表示之后记录输入对象。

console.dir：通过类似文件树的方式展示dom中各种属性

Sorce Tab

Break Point 与 Watch

.使用关键字 debugger 或 代码预览区域的行号可以设置断点

.执行断点处时代码暂停执行

.展开 Breaking 列表可以查看断点列表，勾选/取消可以激活/禁用对应断点

Scope 与 Call Stack

压缩后的代码如何调试

移动端H5调试

iOS

• 使用 Lightning 数据线将 iPhone 与 Mac 相连
• iPhone 开启 Web 检查器(设置 -> Safari -> 高级 -> 开启 Web 检查器)
• iPhone 使用 Safari 浏览器打开要调试的页面
• Mac 打开 Safari 浏览器调试(菜单栏 —> 开发 -> iPhone 设备名 -> 选择调试页面)
• 在弹出的 Safari Developer Tools 中调试

Android

• 使用 USB 数据线将手机与电脑相连
• 手机进入开发者模式，勾选 USB 调试，并允许调试
• 电脑点击 inspect 按钮
• 进入调试界面

使用代理工具调试

原理

• 电脑作为代理服务器
• 手机通过HITP代理连接到电脑
• 手机上的请求都经过代理服务器

以 Charles 为例

• 安装 Charles
• 查看电脑 IP 和 端口
• 将 IP、端口号填入手机 HTTP 代理
• Charles 允许授权（默认情况下，Charles 无法抓取https的请求，需要安装证书）
• 使用 SwitchHosts！软件给 Mac 电脑配 Hosts
• 手机访问开发环境页面