这是我参与「第四届青训营 」笔记创作活动的第7天
bug与debug
前端debug的特点
- 多平台
浏览器、hybrid、nodejs、小程序、桌面应用
- 多环境
本地开发环境、线上环境
- 多工具
chrome devtools、charles、spy-debugger、whistle、vconsole...
- 多技巧
console、breakpoint、sourceMap、代理...
Chrome DevTools
动态修改元素和样式
- 点击.cls开启动态修改元素的class
- 2种方式强制激活伪类
- 选中具有伪类的元素 点击.hov
- Dom树右键菜单 选中Force State
- computed
- 截屏
console
//对日志进行分类查看
console.log
console.warn
console.error
console.dabug
console.info
console.table //具像化的展示JSON和数组数据
console.dir //通过类似文件树的方式展示对象的属性
console.time
注：占位符
给日志添加样式，可以突出重要的信息
%s：字符串占位符
%o：对象占位符
%c：样式占位符
%d：数字占位符
注：各种类型日志颜色不同
实例
source tab
进入暂停状态
- 方法一
- 方法二
快速查看值
- 方法一
- 方法二
breakpoints
查看断点列表
scope
查看作用域列表（包含闭包）
call stack
查看当前JavaScript代码的调用栈
压缩后的代码的调试——source map
network
Application
performance
解决性能问题
- 查看FPS指标
- 法一
- 法二
正常情况下，刷新频率为60
- 寻找性能瓶颈
lighthouse
移动端H5调试
真机调试
VConsole
使用代理工具调试
常用代理工具
- charles用完及时关掉
nodejs调试
inspector protocol +chrome devtool
inspector protocol+vs code
常用开发调试技巧
保存调试的中间状态码
查看所有修改
利用代理解决开发阶段的跨域问题（cors/error）
部署到线上之后 也是代理 ngix进行
