这是我参与「第四届青训营 」笔记创作活动的的第6天
前端Debug的特点
- 多平台：浏览器、Hybrid、Nodejs、小程序、桌面应用
- 多环境：本地开发环境、线上环境
- 多工具：Chrome devTools、Charles（抓包工具）、Whistle、vConsole
- 多技巧：Console、BreakPoint、sourceMap、代理
Chrome devTools
Elements
-
强制激活伪类
- 选中具有伪类的元素，点击对应状态
- DOM树右击菜单，选择Force State
-
Computed下的Filter中可以搜索对应的样式
-
Styles中可以修改对应样式
-
右击DOM树有很多好玩的操作，例如截屏
Console
-
console.log：字符串是白色，数字是蓝色
-
console.warn
-
console.error
-
console.debug：蓝色的字
-
console.info：类似console.log
-
console.table ：具象化展示JSON和数组数据
-
console.dir：通过类似文件树的方式展示对象的属性
-
console.time - console.timeEnd：计算代码运行时间
-
占位符：给日志增加样式
- %s：字符串
- %o：对象
- %c：样式
- %d：数字
Source Tab
-
左侧：页面资源文件目录树
-
中间：代码预览区域
-
右侧：Debug工具栏 + 断点调试器
- 暂停/继续
- 单步跳过
- 进入函数
- 跳出函数
- 单步执行
- 激活/关闭所有断点
- 代码执行异常处自动
Source Map
Network
Lighthouse
核心Web指标
移动端H5调试
通常使用React Native之类框架开发移动端App时，需要获取类似Web开发时浏览器提供的devTools时，可以通过以下方法进行调试：
代理调试工具
- charles：查看、控制网络请求，分析数据
- fiddler：类似charles，适合windows平台
- spy-debugger：远程调试手机页面，抓包
- whistle：基于node实现的跨平台Web调试代理工具
Nodejs调试工具
- node —inspect=8888 index.js （检测端口不能是node后端运行的端口）
- chrome浏览器访问服务
- 打开devTools工具。如果没有，则打开chrome://inspect/#devices配置netword target
VSCode + Inspector Protocol调试
通过vscode插件 + 自带的调试功能，breakpoint、call stack。
其他调试方法
Override（覆盖）
选中工作文件夹，在element中修改的样式会保存进工作文件夹中
Proxy（代理）
Q1：如何解决浏览器中的CORS（跨域）问题？
通过代理工具，将请求代理到实际服务器所在地址。
Q2：为什么代理能解决问题？
浏览器由于同源策略，会限制对不同源的服务器所在地址的访问。而通过代理，我们请求的依旧是浏览器同源的地址，代理工具在浏览器外部对地址进行了转换，请求到了外部的资源。因此绕过了浏览器的同源限制。
另外，这种Application的request经过proxy tools代理到server的过程称为正向代理。
Q3：项目上线后如何解决CORS问题？
通过Nginx反向代理。用户的请求经过Nginx代理后到达server实际运行的位置，获取到相应数据，返回到客户端。因此绕过了同源策略（用户访问的前端地址和后端实际运行的地址不同。不是Application主动请求）
用户的request经过proxy tools代理到server的过程称为反向代理。
启用本地SourceMap
通过代理，将线上map映射到本地map文件
Mock（模拟）
通过mock工具，在开发阶段，请求接口时返回假数据。
