这是我参与「第四届青训营 」笔记创作活动的第3天
前端必须知道的开发调试知识
- Web 应用使用 Chrome devTools 调试
- 移动端 H5 调试（暂未）
- NodeJs 应用调试（暂未）
- 常用代理工具的使用
前端Debug多平台、多环境、多工具和多技巧等特点。
一、DevTools PC端进行调试
点击.cls开启动态修改元素的class
强制调试某种状态的伪类
如果类名比较多，我们可以computed界面通过搜索找到我们需要的
点击箭头跳转进行调试
右键body。可以找到截取整个网页屏幕的
在console界面中：
可以日志添加样式！（小tips）
占位符给日志添加样式，可以突出重要的信息 %s:字符串占位符;
- %o:对象占位符;
- %c:样式占位符;
- %d:数字占位符。
console.log
console.warn
console.error
console.debug
console.info
使用console.table()具象化（表格）展示JSON和数组数据
通过console.dir() 打印文件树，展开各种属性，解决console.log()拿不到元素的问题
Sorce Tab
在代码中加上
debugger;
计算结果不是字符串拼接，需要转类型
鼠标移到相应变量上会显示其值
通过watch监听查看，Breakpoints是断点的位置
对于闭包问题，可以通过Scope去查看作用域列表（包含闭包）
Colosure是闭包
Call Stack可以查看当前javaScript代码的调用栈
调试压缩的代码
Sourcemap 本质上是一个信息文件，里面储存着代码转换前后的对应位置信息。它记录了转换压缩后的代码所对应的转换前的源代码位置，是源代码和生产代码的映射。 Sourcemap 解决了在打包过程中，代码经过压缩，去空格以及 babel 编译转化后，由于代码之间差异性过大，造成无法debug的问题。
代码上线的时候，出于安全因素和减少体积，不带sourcemap的。
那么没有sourcemap，怎么去映射源码呢？
在项目打包的时候回会带上soucemap去build，产物里是有sourcemap，然后上线之前把sourcemap上传到另一个平台，如监控平台。再删掉sourcemap删掉上线。
开启和关闭sourcemap的配置
NetWork
Waterfall 瀑布图 展示的是串行并行 执行
模拟弱网环境测试性能
####想知道到底是前端还是后端的问题？ 在Preview和Response进行查看接口
Headers里有各种请求的信息
Application
Application面板展示与本地存储相关的信息
-
Local Storage
-
Session Storage
-
IndexedDBweb SQL
-
Cookie
快速清网站的缓存
Performance
性能测试案例
cpu慢6x，没有丢帧
观察FPS
提示性能瓶颈的位置
不优化的：offsettop 每次都要重新渲染 优化后的：提前存储，后面不需要进行重排，渲染
Lighthouse
衡量性能的三个重要指标
-
Largest Contentful Paint (LCP): 最大内容绘制.测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生。
-
First lnput Delay (FID): 首次输入延迟.测量交互性。为了提供良好的用户体验，页面的FID应为100毫秒或更短。
-
Cumulative Layout Shift (CLS): 累积布局偏移,测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在0.1.或更少。
往下滑动是性能优化的一些建议
二、技巧-解决跨域
1.打开Sources面板下的的Overrides
2、点击Select folders for Overrides。选择一个本地的空文件夹目录。
3.允许授权
4.在page 中修改代码，修改完成后command +s保存
5.打开devTools ，点击右上角的 三个小点-> More tools就能看到所有修改了
解决跨域问题
使用代理
