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

前端Debug特点

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

Chrome DevTools

强制激活伪类的方式

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

占位符

给日志添加样式，可以突出重要信息

• %s:字符串占位符
• %o:对象占位符
• %c:样式占位符
• %d:数字占位符

log,error,info,warn区别

• log()和info()这两个没区别
• warn()输出的log前有个黄色的图标
• error()输出的log前有个红色的图标
• warn与error下面展开，会有堆栈内依次调用运行的方法名及其他等信息，除了颜色信息都是一样的，一个时警告，一个时报错，警告可以不修改，报错必须修改。

Source Map简介：

Source Map对压缩后的代码进行调试，映射到压缩部分前源码

• version: 表示source map版本
• names: 在代码中找到的方法或变量名称
• file: source map所属的转译后文件的名称
• sourceRoot: basePath — 源相对于这里
• sourcesContent: 可选属性，可以包含整个源代码。
• sources: 原始源文件的路径（例如 TypeScript 文件）
• mappings: 关键。 mappings的属性是一个巨大的字符串，其中包含 Base64值。这些值有助于找到源文件中的原始位置。

目前前端部署的代码一般都是经过webpack压缩的，压缩的目的一般如下：

• 移除无用代码

• 混淆代码中变量名称、函数名称等

• 对结构进行扁平化处理 可以在项目中webpack.dev.js开启devtool:"source-map"对压缩后代码调试。但是它不应该用在生产环境，而是应该用在开发环境，如果用在生产环境，就可以通过sourcemap文件中的映射，还原出前端完整代码，造成代码安全隐患。