前言：
这是我参与「第四届青训营 」笔记创作活动的的第五天
前端debug的特点
- 多平台：浏览器，Hybrid,Nodejs,小程序，桌面应用
- 多环境：本地开发环境，线上环境
- 多工具
- 多技巧
浏览器
动态修改元素和样式 右键检查 element元素
- 点击.cls开启动态修改元素的class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态查看类名的生效效果
- 点击具体的样式值（字号，颜色，宽度高度等）可以进行编辑，浏览器内容区域实时预览
- Computed下点击样式里面的箭头可以跳转到styles面板中的css规则，filter搜索我们想要的效果
- 强制激活伪类1选择元素的状态Force state/2或者点hover
- 屏幕截图：body右键选择截图
console控制台 左侧可以选择等级，对日志进行分类查看
- console.log普通打印
- console.warn打印警告，黄色
- console.error打印错误，红色
- console.debug打印调试，蓝色
- console.info类似log
- console.table: 具象化的展示JSON和数组数据
- console.dir: 通过类似文件树的方式展示对象的属性
- 占位符：给日志添加样式，可以突出重要的信息 %s字符串占位符 %o对象占位符 %c样式占位符 %d数字占位符
- 数字123和字符123打印出来不一致
Sources 源代码
- 加上debugger
- 行号点一下
- 移动鼠标会显示数据的大小，watch也会显示
压缩后的代码如何调试？
前端代码天生具有“开源”属性，出于安全考虑，上线之前javaScript代码通常会被压缩，压缩后的代码只有一行，变量使用a,b等替换，整体变得不可阅读。
Network网络
- 离线（No throtting）网络设置，可以模拟网络环境
- 了解发生请求的时机是否同时
performance性能
- 页面卡顿-查看FPS指标-寻找性能瓶颈-优化代码
- more tools-rendering-frame rendering stats
lighthouse
Node.js调试
常用开发调试技巧
