这是我参与[第五届青训营]伴学笔记创作活动的第九天

PC端的断点调试

前端调试方式（PC）

Chrome浏览器的调试方式

Elements

在浏览器动态修改元素和样式

1. 点击元素审查，选中元素，看见右侧样式中有.cls 即可以开启修改指定元素的class
2. 选中元素后，可以动态地给元素添加类名
3. 勾选/取消类名可以动态在网页中查看类名生效的效果
4. 在样式中，点击元素样式可以具体设置样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览。
5. computed下点击样式里面的箭头可以跳转到styles面板中的css规则

激活伪类方式

• 在HTML元素中选中具有伪类的元素，右键选择Force state选择伪类元素
• 选中具有伪类的元素，点击右侧样式中的：hov 即可强制进行选择指定伪类时的样式

Console

打印常用的日志：

console.log('你好')
console.warn('你好')
console.error('你好')
console.debug('你好')
console.info('你好')
//给日志添加样式 %s字符串占位符 %o：对象占位符 %c：样式占位符 %d：数字占位符
console.log('%s %o,%c%s','hello',{name:'tome',age:18},'font-size:24px;color:red','Hello World~');
//具象化展示Json和数组数据
console.table(arr)
//通过类似文件树的方式展示对象的属性
console.dir(document.getElementById('my'))

Source

主要分为四个区域

• 页面资源文件目录树

• 代码预览区域

• Debug工具栏（从左至右一次进行的是）

  • 暂停（继续）
  • 单步跳过
  • 进入函数
  • 跳出函数
  • 单步执行
  • 激活（关闭）所有断点
  • 代码执行异常处自动

• 断点调试器

  • 使用关键字在编写的代码中写 debugger； 或者在代码预览器行号可以设置断点
  • 执行到断点处时代码暂停执行
  • 展开breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应的断点
  • 暂停状态下，鼠标hover变量可以查看变量的值
  • 在调试器Watch右侧点击+可以查看对应的变量监控，查看对应变量的值
  • 展开scope可以查看作用域列表
  • 展开Call Stack可以查看当前javascript代码的调用栈

压缩的代码如何调试：使用sourcemap 实际开发将.map文件传到错误监控平台，将真实开发的文件部署上线

NetWork

从上至下，从左至右

• 控制面板
• 过滤面板
• 概览区域
• Request Table面板
• 总结面板
• 请求详情面板

Application

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

• Local Storage
• Session Storage
• IndexedDB
• Web SQL
• Cookie

Performance

• 控制面板

• 概览面板

  • FPS：每秒帧数
  • CPU：处理各个任务花费的时间
  • NET：各个请求花费的时间

• 线程面板

  • frames：帧线程
  • Main：主线程，负责执行Javascript，解析HTML/CSS,完成绘制
  • Raster：Raster线程负责layer或者某些块的绘制

• 统计面板

LightHouse

1. Largest Contentful Paint：
2. Cumulative Layout Shift
3. First Contentful Paint