一、前端debug的特点
- 多平台（浏览器、Hybrid、NodeJS、小程序、桌面应用）
- 多环境（本地开发环境、线上环境）
- 多工具（chrome devTools、Charles、Spy-Debugger、Whistle、vConsole）
- 多技巧（Console、BreakPoint、sourceMap、代理等）
二、chrome devTools
element-网页的元素和样式
console-控制台，展示日志
sorce tab-展示项目源代码、代码预览、debug工具栏、断点调试
scope与call stack-scope可以查看作用域列表（包含闭包）、call stack可以查看当前js代码的调用栈
P.S.压缩的代码如何调试？
-sourcemap
network-请求资源
application-与存储相关的信息
performance-网页性能
lighthouse-核心web指标
三、 移动端H5调试
- 真机调试
-
VConsole
-
使用代理工具调试
常用代理工具：charles（查看、控制网络请求，分析数据）、fiddler（适合windows平台）、spy-debugger（远程调试手机页面、抓包）、whistle（基于Node实现的跨平台web调试代理工具）
四、Nodejs调试
-
Inspector Protocol + Chrome Devtool
-
Inspector Protocol +VS Code
五、常用的开发调试技巧
- 线上即时修改Overrides
- 利用代理解决跨域问题
- 启用本地的source map
- 使用代理工具mock数据
六、跨域相关知识
- 什么是跨域？
是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。
当协议、子 域名 、主 域名 、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。
- 跨域的方法：
-
JSONP原理
利用script元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 数据 -
跨域资源共享CORS
它允许浏览器向跨源的服务器，发出XMLHttpRequest请求，从而克服AJAX只能同源使用的限制 。实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信 -
Nginx代理
proxy代理是前端用的最多的解决跨域的方法。 即配置一台和浏览器相同端口的服务器，浏览器访问代理服务器，代理服务器向目标服务器发送请求，由于服务器之间不存在跨域问题，代理服务器就可以拿到请求数据，而后因为浏览器和代理服务器端口号一致，不存在跨域问题，因此浏览器不会拦截从代理服务器收到的数据，顺利拿到请求数据
-
