前端开发调试｜ 青训营笔记

小小冰452
87 阅读1分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天

课程重点

  1. Elements
  2. Console
  3. Source
  4. Performance
  5. Network
  6. 真机调试
  7. 代理调试
  8. 常用工具

前端开发调试之 PC 端调试

Bug与Debug

Bug的产生

image.png 前端Debug的特点

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

Chrome devTools

动态修改元素和样式 image.png

Console

image.png Sorce Tab

image.png Break Point 与 Watch

image.png Scope与Call Stack

image.png 压缩后的代码如何调试

image.png

Performance

image.png Performance运用示例 image.png

image.png 衡量性能的指标 image.png

前端开发调试之移动端调试

真机调试

image.png

VConsole

image.png

使用代理工具调试

原理：

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

以Charles为例：

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

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

image.png

Nodejs调试

Inspector Protocol + Chrome Devtool

image.png Inspector Protocol + VS Code

image.png

常用的前端调试技巧

线上即时修改Overrides

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

image.png 启动本地source map

image.png 使用代理工具Mock数据

image.png 小黄鸭调试大法

image.png

avatar
文章
阅读
粉丝