这是我参与「第四届青训营 」笔记创作活动的第七天
前端开发调试
bug&debug
bug来源
前端debug的特点
- 多平台：浏览器、nodejs、小程序、桌面应用等
- 多环境：本地开发环境、线上环境
- 多工具：chrome、devTools、Charles、Spy-Debugger、vConsole等
- 多技巧：Console、BreakPoint、sourceMap、代理
chrome DevTools
修改元素和样式
点击elements面板
双击或右键改变类名
改样式：computed-输入要改的属性
console日志
调试代码、输出
console.warn/console.debug/console.error可以利用等级来调试代码
console.dir打印对象，展示对象属性及对应的值。可用于绑定对象，dom节点。
列出数组的每一项：console.table
占位符 %c样式 %s字符串 %o对象
source Tab
三个部分分别是：
文件 代码 调试代码
break point&watch
可以在你觉得有错的部分加上debugger,新增断点，breakpoints查看断点列表鼠标放
watch对某一个值进行监听，可以看到代码运行过程中，该值的变化。
Scope&Call Stack
scope 作用域 看对应变量 包含闭包
Call Stack 执行栈 执行上下文，调用栈，看当前程序执行到了哪个函数。
压缩后的代码如何调试？
压缩后的代码，变量名会变，用Source Map生成映射文件之后，压缩代码会变成源文件。
NetWork
整个站点的网络请求，可以看参数返回头，值
模拟弱网，更改代码：NetWork->3G
Application
本地存储
快速清除数据：Storage->claer slie data
网页截图
选中要截图的部分，右键选择Capture Node screenshot
Performance
调试性能
Lighthouse
移动端H5调试
01 真机调试
ios/android
02 Vconsole
03 代理工具调试
原理
运行步骤
常用工具 charles fiddier spy-debugger whisle
Nodejs调试
Inspector Protocol+Chrome Devtool
Inspector Protocol+VScode
常用开发调试技巧
01线上及时修改overrides
02利用代理解决开发阶段的跨域问题
03 启用本地source map
线上source map不可用时，使用map local网络映射访问本地scource map文件
04 代理工具Mock数据
