这是我参与「第四届青训营 」笔记创作活动的的第4天
一、课堂重点内容
- Bug与Debug
- Chrome DevTools
- 移动端H5测试
- Nodejs调试
- 常用开发调试技巧
二、详细知识点介绍
世界上第一个bug
1947年九月，美国准将Grace Hopper在哈佛大学实验室测试Mark II计算机时发生故障，后来发现是一只飞蛾，把这个虫子去除后计算机就恢复正常了，由此得名bug，而修正故障就命名为了debug
压缩后的代码如何调试
出于安全考虑，上线之前JavaScript代码通常会被压缩，压缩后的代码只有一行，变量使用‘a’，‘b’等替换，整体变得不可阅读。
答案——SourceMap（需有webpack环境）
原理：生成映射，使得被压缩的代码能通过该映射对应至源代码，从而完成定位
代码上线时不带sourcemap，将带sourcemap的文件传至监控平台
移动端调试
真机调试
VConsole
在页面注入该组件，运行时页面会有绿色方块（vConsole），点击后与浏览器的Chrome DevTools很相似
使用代理工具调试
原理：
- 电脑作为代理服务器
- 手机通过HTTP代理连接到电脑
- 手机上的请求都经过代理服务器
Nodejs调试
- 执行命令 node --inspect=8888 index.js
- 浏览器访问服务
浏览器
- 点击绿色node图标打开node调试面板（在chrome://inspect/#devices中配置network target）
- 在node调试面板中使用断点调试
vscode
- 点击运行-启动调试
- 操作后在浏览器中可以看到反馈
常用前端开发技巧
线上及时修改 Overrides
利用代理解决开发阶段的跨域问题
- 启动代理
- 配置代理规则
- 开启全局代理
启用本地source map
线上不存在source map时可以使用map local 网络映射功能来访问本地的source map文件
- 启动代理工具（比如Charles）
- 添加映射：Map Local
三、实践联系例子
压缩后代码的调试
通过devtool:'source-map'启用功能
一段压缩后的代码，只有一行
sourceMap 生成的映射关系
四、课后个人总结
为什么代理可以解决跨域问题
会跨域是因为不同源，而代理就是想办法让他们同源。
使用代理前
客户端的请求会直接发送到服务器 =》 然后服务器处理完毕响应客户端 =》 客户端检测是否同源 =》 发现不同源，啪，报错。 游戏结束
使用代理后
客户端发送请求到代理服务器 =》 代理服务器 =》 代理服务器转发给目标服务器 =》 目标服务器处理请求并向代理服务器做出响应 =》 代理服务器接收响应 =》 代理服务器再把请求发送给客户端（代理服务器允许跨域请求。因为代理服务器是一个类中间件，具备一个换装功能。可以将不符合同源策略的域名伪装成符合同源策列的域名）=》 客户端检测不出跨域，处理响应。
