这是我参与第五届青训营伴学笔记创作活动的第十二天!

前端开发调试学习

前端Debug的特点

• 多平台
• 多环境
• 多工具
• 多技巧

Chrome DevTools

动态修改元素和样式：

• 点击.cls开启动态修改元素的class
• 输入字符串可以动态的给元素添加类名
• 勾选/取消类名可以动态的查看类名生效效果
• 点击具体的样式值(字号，颜色，宽度高度等等)可以进行编辑，浏览器内容区域实时预览
• Computed下点击样式里的箭头可以跳转到styles面板中的css规则

可以用以下两种方式强制激活伪类：

• 选中具有伪类的元素，点击hov
• DOM树右键菜单，选择Force State

Console

左侧可以选择等级，对日志进行分类查看

• Console.log
• Console.warn
• Console.error
• Console.debug
• Console.info
• Console.time
• Console.table 具像化的展示JSON和数组数据
• Console.dir 通过类似文件树的方式展示对象的属性

占位符： 给日志添加样式，可以突出重要的信息

• %s 字符串占位符
• %o 对象占位符
• %c 样式占位符
• %d 数字占位符

Break Point与Watch

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

Scope与Call Stack

• 展开Scope可以查看作用域列表(包含闭包)
• 展开Call Stack可以查看当前javascript代码的调用栈

Application

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

• Local Storage
• Session Storage
• IndexedDB
• Web Sql
• Cookie

Performance

控制面板

概览面板：

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

线程面板

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

统计面板

加油！拒绝摆烂！让我们不负青春！在青训营度过充实的一天！