这是我参与「第四届青训营 」笔记创作活动的第7天
本堂课重点内容
- Web 应用使用 Chrome devTools 调试
- 移动端 H5 调试
- NodeJs 应用调试
- 常用代理工具的使用
详细知识点介绍
前端debug的特点
- 多平台：浏览器、Hybrid、NodeJs、小程序、桌面应用...
- 多环境：本地开发环境、线上环境
- 多工具：Chrome devlools、Charles、Spy-Debugger、whistle、vConsole ..
- 多技巧：Console、BreakPoint、sourceMap、代理...
chrome devtools使用说明
Element：动态修改元素和样式
- 点击.cls开启动态修改元素的class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览
- Computed下点击样式里的箭头可以跳转到styles面板中的css规则
可以用以下2种方式强制激活伪类
- 选中具有伪类的元素，点击:hov
- DOM树右健菜单，选择Force State
Console Tab几种console命令
- console.log
- console.warn
- console.error
- console.debug
- console.info（前五种以不同形式输出日志、错误等信息）
- console.table
具像化的展示JSON和数组数据 - console.dir
通过类似文件树的方式展示对象的属性
（占位符给日志添加样式，可以突出重要的信息
% s:字符串占位符;% o:对象占位符;% c:样式占位符;%d:数字占位符）
Sorce Tab
-
区域1:页面资源文件目录树
-
区域2:代码预览区域
-
区域3:Debug工具栏从左到右依次为
-
暂停（继续)
-
单步跳过
-
进入函数
-
跳出函数
-
单步执行
-
激活（关闭)所有断点
-
代码执行异常处自动
- 区域4:断点调试器
Break Point与Watch
- 使用关键字debugger 或代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开Breakpoints列表可以查
- 看断点列表，勾选/取消可以激活/禁用对应断点
- 暂停状态下，鼠标hover变量可以查看变量的值
- 在调试器watch右侧点击＋可
- 以添加对变量的监控，查看该变量的值
Scope与Call Stack
- 展开Scope 可以查看作用域列表(包含闭包)
- 闭包：一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。
- 展开Call Stack 可以查看当前javaScript代码的调用栈
Source Map
- 为了给上线的产品源码加密，会经过各种压缩，合并，代码丑化等等操作，Sourcemap 就是一个信息文件，它里面存储着代码转换前后的对应位置信息，也就是转换压缩后的代码所对应的转换前的源代码位置，是源代码和生产代码的映射。
- 在上线前，将js.map文件从项目文件中移除至前端监控系统之类的平台，用户无法看到Sourcemap，而在监控平台上仍可以利用sourcemap进行debug
Network
network 模块用以检索网络面板里开发人员工具显示的网络请求的有关信息
- 区域1:控制面板
- 区域2:过滤面板
- 区域3:概览区域
- 区域4: Request Table面板
- 区域5∶总结面板
- 区域6:请求详情面板
Application
-
Application面板展示与本地存储相关的信息
-
Local Storage
-
Session StoragelndexedDB
-
Web SQL
-
Cookie
Performance
- 区域:控制面板
- 区域2:概览面板FPS:每秒帧数
- CPU:处理各个任务花费的时间
- NET:各个请求花费时间
- 区域3:线程面板
- Frames:帧线程
- Main:主线程，负责执行Javascript,解析HTML/CSS,完成绘制
- Raster: Raster线程，负责完成某个layer或者某些块(tile)的绘制。
- 区域4:统计面板
优化页面示例：页面卡顿-->查看FPS指标-->寻找性能瓶颈-->优化代码
Lighthouse
核心Web指标
- Largest Contentful Paint (LCP):最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生。
- First lnput Delay (FID):首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为10毫秒或更短。
- Cumulative Layout Shift (CLS):累积布局偏移，测量视觉隐定性。为了提供良好的用户体验，页面的CLS 应保持在0.1.或更少.
课后个人总结
掌握高效的调试方法对于开发工作十分重要，下面是不同部分代码的调试方式
HTMl + CSS
目标：
- 怎么查看页面上一个节点的样式？
- 怎么在调试工具上直接改变页面上一个节点的样式？
首先，使用cmd（ctrl） + alt + i 打开chrome devtool
右侧即可修改CS样式
JS部分
首先打开控制台，打开console的tab
在控制台可以通过log打印、断点调试等方法来调试JS部分
