这是我参与「第四届青训营 」笔记创作活动的的第6天
第一个bug诞生与1947年
浏览器DevTools 调试
element 元素
- 点击.cls 开启动态修改元素的class
- 也可以点击html元素类名字符串或css属性直接修改值
- 在.cls中点击勾选/取消类名，可以直接看到变化的样式
- 直接勾选/取消css属性值也可以看到变化
- 选中一个元素，可以在页面右键点击元素检查
- 也可以使用调试工具左上侧小箭头去直接指向
- 需要预览某元素伪类状态样式，右击元素强行执行状态进行切换
- 或者点击:hov直接切换
- 右键body元素的截取节点屏幕截图，可以获得页面截图
- 需要寻找某一类名，可以在右侧栏的计算属性的过滤框中搜索
console 控制台
- console.log等可以打印不同状态信息
- console.table 可以以表格方式展现数据
- console.log 可以使用占位符来输出，并且可以更改样式
- 输出不同类型，颜色不相同
- console.time系列可以用来计算执行事件
sources 源代码
- 在代码中使用关键字debugger或者在预览区添加点击对应行号，可以添加断点
- 右侧Watch栏（监视）可以添加监视变量
- 在BreakPoint栏（断点）可以添加或删除断点
压缩代码调试
思考题解答：
当我们上线一个项目时，不将sourceMap一起上传，而是将它上传到监控平台上去
开启sourceMap的方式，就是在webpack配置里面加上这个配置：
network 网络
application 应用
- 页面存储相关
performance 性能
- 你可以通过录制，去获得一段运行的相关性能信息
lightHouse 更方便的查看性能指数评级
移动端调试
nodeJs调试
调试技巧
使用override 替换
添加override文件夹，当我们在浏览器调试工具中更改的属性或样式就可以被保留起来覆盖原文件，再次刷新不会消失
代理服务器解决跨域问题
