bug与debug

动态修改元素和样式

• 点击.cls开启动态修改元素的class
• 输入字符串可以动态的给元素添加类名
• 勾选/取消类名可以动态的查看类名生效效果
• 点击具体的样式值（字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览
• Computed下点击样式里的箭头可以跳转到 styles面板中的css规则
• 可以用以下2种方式强制激活伪类
  选中具有伪类的元素，点击:hovDOM树右键菜单，选择Force State

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:断点调试器

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

SourceMap

一般在前端打包阶段，通过插件将构建好的SourceMap上传到前端监控平台，比如Webpack对应的插件 @sentry/webpack-plugin。发生错误时，错误上报，可以到对应的监控平台，根据堆栈信息和上传的SourceMap，找到出错的源码信息.但SourceMap不上传到生产环境（避免体积增大，避免源码被查看）。