浏览器自带调试工具使用
动态添加删除class类名
- 浏览器F12 / 右击页面点击检查
- 依次点击（
可看到指定div中所包含类名）
动态修改颜色
动态添加状态
快速筛选样式
Console的使用
console.log
console.warn
console.error
console.debug
console.info
console.table: 形象化展示JSON和数组数据
console.dir: 常用于dom对象（能够通过类似文件数的方式展示对象的属性）
占位符：为日志添加样式，可突出重要的信息。（%s: 字符串占位符； %o: 对象占位符； %c：样式占位符； %d: 数字占位符）
注意：数字和字符串打印出来的颜色不同。（数字是蓝色，字符串是白色）
调试压缩后的代码
前端在不压缩前，代码相对于群众是‘开源’的，会存在安全风险。所有一般上线之前都会将代码压缩，压缩后的代码会按一行显示，不宜读取
解决办法：Source Map
网络
标记的为重点注意对象，并不代表其他不重要
数据存储
网站性能
有趣且热门功能
全屏截取
F12 ——》 右击最外层标签body ——》 点击截取节点屏幕截图
