前端必须知道的开发调试知识 | 青训营

2023-08-22 105 阅读2分钟

1.Bug与Debug

01.Bug的产生

在这里插入图片描述

02.前端Debug的特点

** 1.多平台 **：浏览器、Hybrid、Nodejs、小程序、桌面应用等 ** 2.多环境 **：本地开发环境、线上环境 ** 3.多工具 **：Chrome devTools、Charies、Spy-Debugger、Whisitle、vConsole ** 4.多技巧 **：Console、BreakPoint、sourceMap、代理等

2.Chrome DevTools

1.动态修改元素和样式

在这里插入图片描述

2.Console

在这里插入图片描述

3.Sorce Tab

在这里插入图片描述

3-1 Break Point 与 Watch

在这里插入图片描述

3-2 Scope与Call Stack

在这里插入图片描述

3-3 压缩后的代码如何调试

在这里插入图片描述

3-3 Source Map

在这里插入图片描述

4. NetWork

在这里插入图片描述

5.Application

在这里插入图片描述

6.Performance

在这里插入图片描述

6-1 Performance 运用示例

在这里插入图片描述

7.Lighthouse

在这里插入图片描述

3.移动端H5调试

1.真机调试

IOS

使用Lightning数据线讲iPhone与Mac相连
iPhone开启Web检查器（设置--Safari--高级--开启Web检查器）
iPhone使用Safari浏览器打开要调试的页面
Mac打开Safari浏览器调试（菜单栏--开发--iPhone设备名--选择调试页面）
在弹出的Safari Developer Tools中调试

没有iPhone设备可以在Mac AppStore安装xcode使用其内置的ios模拟器

Android

使用USB数据线将手机与电脑相连
手机进入开发者模式，勾选USB调试，并允许调试
电脑打开Chrome浏览器，在地址栏输入：chrome://inspect/#/devices并勾选Discover USB devices选项
手机运行远程调试，并访问调试页面
电脑点击inspect按钮
进入调试界面

直接使用手机扫码查看，体验更佳

3-2 VConsole

在这里插入图片描述

3-3 使用代理工具调试

原理：

电脑作为代理服务器
手机通过HTTP代理连接到电脑
手机上的请求都经过代理服务器

以Charles为例：

安装Charles
查看电脑IP和端口
将IP、端口号填入手机HTTP代理
Charies允许授权
使用SwitchHosts！软件给Mac电脑配Hosts
手机访问开发环境页面

默认情况下，Charies无法抓取到HTTPS的请求，需要安装证书

3-4常用代理工具

在这里插入图片描述

4.Nodejs调试

1.Inspector Protocol + Chrome DevTools

在这里插入图片描述

Inspector Protocol + VS Code

在这里插入图片描述

5.常用开发调试技巧

1.线上即时修改 Overrides

在这里插入图片描述

2.利用代理解决开发阶段的跨域问题

在这里插入图片描述

3.启用本地Source map

在这里插入图片描述

4.使用代理工具Mock数据

在这里插入图片描述

5.小黄鸭调试大法

在这里插入图片描述