前端必须知道的调试知识｜青训营笔记

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

一、PC端

PC端采用chrome开发者工具进行调试

运行在Chrome浏览器，打开F12可以调试

点击下图中：hov或者.cls可以通过类或伪类动态调试style

console.log("1");
console.log(1);
console.log("study");
console.warn("study");
console.info("study");
console.debug("study");
console.error("study");

图中整型1和字符串1的颜色是一样的，没有像老师讲的那样通过颜色区分出来；
不同类型的日志区分也不太大

console.table()可以具象化展示json和数组数据

console.dir可以以文件树的形式展示对象是属性

可以通过占位符给日志添加样式：%s字符串；%o对象；%c样式；%d数字

console.log( '%c  红色','color:red;font-size:50px;' )

console.time()

计算器的起始方法，结束方法为 console.timeEnd() ，该方法执行后会将执行时长显示在控制台上

为了安全考虑，在上线前的js代码会被压缩，压缩后变得不可阅读，很难去解析出每一句代码的意思。因此可以采用打包工具，打包的时候配置得到映射文件，将映射文件保留，除去映射文件后的文件发布，这样既保证了安全性，又使得开发人员可以收集错误去找到bug。

比如webpack打包工具，可以在开发环境下配置sourceMap，打包的时候得到映射文件，上线发布不带映射文件，通过代理与映射文件匹配进行调试

可以模拟不同的网络环境，方便适配弱网环境

便于测试页面卡顿，解决问题从而提高性能和用户体验