前端应该知道的开发调试知识

四、前端必须知道的开发调试知识

前端debug的特点

1. 多平台
2. 多环境
3. 多工具
4. 多技巧

PC端

例：Chrome Devtools(Chrome自带的调试工具)

如何使用?

• 打开浏览器 -> 检查

1-1 Elements面板

• 通过点击cls来显示元素样式，以及动态添加或删除类名
• 可以在style栏中实时修改样式
• 用处:在前端开发中，可以通过这种方式进行样式的调试

注意点:伪类并不能实时显示

• 如何调试伪类:点击伪类元素->forcestate->选中hover

当属性较多的时候:点击compted->侧边栏->搜索属性->切换到对应样式

如何对网页进行截图

• 选中body->captue->screenshot->完成截图

对元素本身进行修改

• 例:找到干扰项->delete

console面板

• console.table:可以输出表格信息
• console.dir:输出树形结构中结点信息

具体用处：使用console解决代码bug

• 存在问题的代码部分使用console.log,逐步排查(小方法:自定义参数)

• 解决方法:将数据类型转换为整数型即可解决

注:不同类型的数据所显示的颜色不同

1-2 source面板

• 在代码中输入debugger，程序会暂停运行
• 在代码段中添加断点，breakpoints中可以勾选取消对应的断点

补充:scope(作用域)和call stack(备用栈)与debug关系不大

用处

可以帮助我们查看js中有哪些作用

1-3 压缩后的代码如何进行调试？

解决方法

创建sourceMap,供我们调试，上线后再删除sourceMap(在监控平台上找到sourceMap,供我们调试)

sourceMap概念

问题:源码和sourceMap文件是怎么对应上的?

答:sourceMap源码之间是映射的关系，所以可以快速的匹配上

1-4 performance面板

生成报告，汇报页面是如何进行渲染的

作用

定位到页面有哪些问题

1-5 network面板

作用

定位与后端交互时产生的问题

用法:查看request和response的内容来定位问题

Application

与浏览器的本地存储有关

如何清除缓存

Appication->storage->clear site data

总结概括

Elements:查看dom结点，样式，调整样式。

console:输出不同类型的日志，结合代码，解决不同的问题

source:查看网页内容，通过debugger调试，查看变量值，帮助我们更好的定位问题

Network:请求相关

performance:性能相关

Application:本地存储相关