前端开发调试｜青训营笔记这是我参与「第四届青训营」笔记创作活动的第10天一、本堂课重点内容：介绍了PC WEB

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

一、本堂课重点内容：

介绍了PC WEB，移动端，nodejs等调试的方法

二、详细知识点介绍：

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:数字占位符

source tab

左侧:页面资源文件目录树
中间:代码预览区域
右侧:Debug工具栏
- 从左到右依次为:
- 暂停（继续)
- 单步跳过
- 进入函数
- 跳出函数
- 单步执行
- 激活（关闭)所有断点
- 代码执行异常处自动
右上:断点调试器

Break Point 与Watch

使用关键字debugger 或代码预览区域的行号可以设置断点
执行到断点处时代码暂停执行
展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
暂停状态下，鼠标hover 变量可以查看变量的值
在调试器Watch 右侧点击+可以添加对变量的监控，查看该变量的值

Scope与Call Stack

展开Scope 可以查看作用域列表(包含闭包)

闭包可以参考developer.mozilla.org/en-US/docs/…

展开Call Stack 可以查看当前javaScript 代码的调用栈

调用栈可以参考developer.mozilla.org/en-US/docs/…

压缩后的代码如何调试

Source Map

mappings字段存储了源文件和Source Map的映射

英文，表示源码及压缩代码的位置关联
逗号，分隔一行代码中的内容。
分号，代表换行。

代码上线的时候不带source map，上线时，将source map上线到另一个平台，出错后错误监控平台分析时就可以对照它本身的source map文件来调试。

network

网络

application

存储

Application面板展示与本地存储相关的信息

Local Storage
Session Storage
IndexedDB
Web SQL
Cookie

点击左侧Application下的Stroage面板中的Clear Site Data可以清除网页的本地存储数据

performence

性能

区域1:控制面板
区域2:概览面板
- FPS:每秒帧数
- CPU:处理各个任务花费的时间
- NET:各个请求花费时间
区域3:线程面板
- Frames︰帧线程
- Main:主线程，负责执行Javascript,解析HTML/CSS,完成绘制
- Raster: Raster线程，负责完成某个layer或者某些块(tile)的绘制。
区域4:统计面板

页面卡顿
查看FPS指标
寻找性能瓶颈
优化代码

Janky Animation (googlechrome.github.io)

lighthouse

WEB指标

Largest Contentful Paint (LCP):最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生。
First Input Delay (FID):首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为100毫秒或更短。
Cumulative Layout Shift (CLS):累积布局偏移，测量视觉隐定性。为了提供良好的用户体验，页面的CLS应保持在0.1或更少。

移动端H5调试

真机
VConsole
使用代理工具调试
- Charles:适合查看、控制网络请求,分析数据
- Fiddler: 与 Charles类似,适合windows平台
- spy-debugger:远程调试手机页面，抓包
- Whistle:基于Node 实现的跨平台Web调试代理工具

Node.js调试

Inspector Protocol + Chrome Devtool

执行命令node --inspect=8888 index.js
chrome浏览器访问服务
点击绿色node图标打开node 调试面板(在chrome:/linspect/#devices中配置network target)
在node 调试面板中使用断点调试

Inspector Protocol + VScode

vs Code 点击运行
添加配置
启动调试
添加断点
查看变量、堆栈

常用开发技巧

线上即时修改Overrides
利用代理解决开发阶段的跨域问题
启用本地source map
使用代理工具Mock 数据

前端开发调试 ｜ 青训营笔记