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

前端bug的特点

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

前端bug的解决方式

以 Chrome DevTools为例——进入网页右键检查进入调试页面

动态修改元素和样式

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

强制激活伪类的方法

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

Console 控制台

展示日志，日志类型不同，输出的类型颜色不同 - console.log console.log(123)和console.log('123')颜色不同，有颜色的表示Numbers类型 - console.info 以上两个在console中均为灰白色，但是同时也可以给log里输出的内容添加样式：

• console.warn 为带标志的红色
• console.error 为带标志的黄色
• console.debug 蓝色
• console.table能够具象化的表示JSON和数组数据
• console.dir 通过类似文件树的方式展示对象的属性

Sorce Tab

• break point 断点

  设置断点的两种方法：

  • 在调试界面 直接点击左侧进行断点设置
  • 在需要断点的代码位置添加使用 debugger; 语句

  查看断点列表方法：展开右侧工具栏里的Breakpoints

• Watch监控变量 在调试器Watch右侧点击+可以添加对变量的监控，查看变量的值

• 暂停状态下，鼠标hover变量可以查看变量的值

• 展开Scope可以查看作用域列表（包含闭包）

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