这是我参与第五届青训营伴学笔记的第十天
web前端调试
1.bug和debug
前端debug的特点
多平台，多环境，多工具，多技巧
2.chrome调试
element
动态修改元素和样式
console
更好的查看日志
console.log
console.warn
console.error
console.debug
console.info
console.table
具象化的展示 JSON 和 数组数据
console.dir
通过类似文件树的方式展示对象的属性
·占位符
给日志添加样式，可以突出重要的信息
%s: 字符串占位符;%o: 对象占位符， %c: 样式占位符; %d: 数字
XHR就是请求的时候断点
Sorce Tab
Break Point 与 Watch
使用关键字 debugger 或 代码预览区域的行号可以设置断点
执行到断点处时代码暂停执行
展开 Breakpoints 列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
暂停状态下，鼠标 hover 变量可以查看变量的值
在调试器 Watch 右侧点击 +可以添加对变量的监控，查看该变量的值
Scope 与 Call Stack
展开 Scope 可以查看作用域列表(包含闭包)
展开 Call Stack 可以查看当前javaScript 代码的调用栈
js压缩后的代码如何调试 souresmap
souresmap文件比较大，我们一般把map文件上传到监控平台，再上传map的产物，从而达到混淆代码的效果 错误可由监控平台显示
mappings 字段存储了源文件和Source Map 的映射
英文，表示源码及压缩代码的位置关联
逗号，分隔一行代码中的内容。
分号，代表换行。
source Map 标准
application
Performance
performance运用实例
googlechrome.github.io/devtools-sa…
Lighthouse
(LCP) : 最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP 应在页面首次开始加载后的2.5秒内发生。
(FID) :首次输入延迟测量交互性。为了提供良好的用户体验，页面的 FID 应为100 毫秒或更短。
(CLS) 累积布后偏移，测量视觉稳定性。为了提供良好的用户体验，页面的 CLS 应保持在 0.1. 或更少
移动端开发
1.真机调试
ios
1.使用 Lightning 数据线将 iPhone 与 Mac 相连
2.iPhone 开启 Web 检查器 (设置-> Safari ->高级 ->开启 Web 检查器)
3.iPhone 使用 Safari 浏览器打开要调试的页面Mac
4.打开 Safari 浏览器调试(菜单栏一>开发->iPhone 设备名->选择调试页面)在弹出的 Safari Developer Tools 中调试
没有 iPhone 设备可以在 Mac AppStore 安装 Xcode 使用其内置的 ioS模拟器
安卓
1使用 USB 数据线将手机与电脑相连
2.手机进入开发者模式，勾选 USB 调试，并允许调试
3.电脑打开 Chrome 浏览器，在地址栏输入:
chrome://inspect/#devices 并勾选Discover USB devices 选项
4.手机允许远程调试，并访问调试页面
5.电脑点击 inspect 按钮
6.进入调试界面
直接使用手机扫码查看，体验更佳
4.node.js调试
5.结合vscode调试
常用的开发调试技巧
线上即时修改overrides
打开 Sources 面板下的的Overrides
点击 Select folders for Overrides选择，个本地的空文件夹目录。
允许授权
在 page 中修改代码，修改完成后 command + s 保存
打开 devTools ，点击右上角的三5个小点 -> More tools -> Changes.就能看到所有修改了
跨域可以使用软件代理
但是线上的网站就是使用nginx
使用代理工具 Mock 数据
1.右键选中要 mock 数据的接口，选择save response，保存文件到本地。
2.本地打开保存的文件，编辑想mock 的数据并保存。
3.右键选中第一步的接口，选择Map Local，Local Path 选择第二步的文件。
当然也可以使用小黄鸭大法
我们把代码一步一步给小黄鸭解释，自然就可以发现那里出错了，没有小黄鸭也可以找周围的同事或者朋友
