bug的产生-----一只飞蛾导致引起
bug特点
修改元素和样式 F12或者检查
左侧显示元素 右侧点击cls显示类名 hov显示状态
cosole日志面板
还有console.table表格结构 console.dir树形结构
Sorce Tab
debugger调试错误，程序暂停调试到debugger处，可以查看暂停状态下值得方法
1.此时鼠标移到哪里会实时的显示出那个元素的值，比如numberA
2. 或者在watch那里显示，点击+输入监听元素
添加断点方法2
在对应source.js文件下，前面点击一下便添加断点
点击蓝色，走下一步
在断点方式下可以查看相应地值
有请求发生的时候触发断点
元素断点
scope 作用域和call stack 执行顺序
压缩后的代码如何调试
webpack进行了代码压缩
加一个配置，npm run build 就会多产出一个文件，source-map放在云端监控平台
source map
performance时间
network
看到请求详细信息
真机调试
生成二维码
代理工具调试
代理工具将上线的代理下载到本地，修改后再提交，最好是下载远程的source.map未被压缩代码
比如Charles这个代理工具
常用移动端，其他工具自己搜索如何做，Charles是收费的，whistle是开源的
利用代理解决跨域问题
可以用whistle工具，现在示例的是字节基于whistle封装的一个小工具
前面是自己本地的地址 后面是真实访问的地址
请求的时候写相对地址，这样到时候就会自动拼上那个地址
打开代理
启动本地source.map
