前端必须知道的开发调试知识 | 青训营笔记
这是我参与「第四届青训营」笔记创作活动的第7天
Chrome DevTools 调试
1、Elements
-
点击 .cls 开启动态修改元素的 class
-
输入字符串可以动态的给元素添加类名
-
勾选/取消类名可以动态的查看类名生效效果
-
点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览
调试伪类？
- computed 下点击样式里的箭头可以跳转到styles面板中的css规则
2、console
-
console.log
-
console.warn
-
console.error
-
console.debug
-
console.info
-
console.table 可以具像化的展示JSON和数组数据
-
console.dir
通过类似文件树的方式展示对象的属性
占位符
给日志添加样式，可以突出重要的信息 %s:字符串占位符; %o:对象占位符; %c︰样式占位符; %d:数字占位符
3、Sorce tab
Debug工具栏从左到右依次为：
暂停（继续)
单步跳过
进入函数
跳出函数
单步执行
激活（关闭所有断点）
代码执行异常处自动
调试方法：
在想要暂停的地方加 debugger; （断点）
也可以直接点一下想要停止的行号
source-map
前端代码天生具有"开源"属性，出于安全考虑，上线之前JavaScript代码通常会被压缩，压缩后的代码只有一行，变量使用'a'、b'等替换，整体变得不可阅读。那么压缩后的代码如何调试呢?
Sourcemap 就是一个信息文件，它里面存储着代码转换前后的对应位置信息，也就是转换压缩后的代码所对应的转换前的源代码位置，是源代码和生产代码的映射， Sourcemap 解决了在打包过程中，代码经过压缩，去空格以及 babel 编译转化后，由于代码之间差异性过大，debug 困难的问题。也就是精准报错，代码所处的文件，还有行数
开启source-map的方法：
在webpack配置中设置devtool: 'none'，那么就会关闭source-map
当我在production模式下，加入 devtool:"source-map" 选项，打包构建后，代码里多了很多个.map文件，这些个map文件里，就包含了源码路径
既然Source Map 可以映射源码，那压缩后的代码带上Source Map 上线不就又不安全了吗?
答：source-map主要用于监控，代码上线时为了安全是不上source-map的，把source-map上传到另一个平台，这样上线后别人看到的就是混淆的代码
