Web调试技术 | 青训营笔记

甘古
124 阅读4分钟

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

一、前端开发调试之PC端调试

1.Bug与Debug

前端Debug的特点

  • 多平台：浏览器、Hybrid、NodeJS、小程序、桌面应用...
  • 多环境：本地开发环境、线上环境
  • 多工具：Chrome devTools、Charles、Spy-Debugger、Whistle...
  • 多技巧：Console、BreakPoint、sourceMap、代理...

2.Chrome DevTools

Chrome DevTools是一组网页制作和调试的工具，内嵌于Google Chrome浏览器中。

动态修改元素和样式

  • 点击.cls开启动态修改元素的class
  • 输入字符串可以动态的给元素添加类名
  • 勾选/取消类名可以动态的查看类名生效效果
  • 点击具体的样式值(字号、颜色、宽度高度等)，可以进行编辑，浏览器内容区域实时预览
  • Computed下点击样式里的箭头可以跳转到style面板中的CSS规则

可以用以下2种方式强制激活伪类

  • 选中具有伪类的元素，点击: hov
  • DOM树右键菜单，选择Force State

Console

查看打印的调试日记信息

日志等级：

  • console.log
  • console.warn
  • console.error
  • console.debug
  • console.info
  • console.table
    • 具象化的展示JSON和数组数据
  • console.dir
    • 通过类似文件树的方式展示对象的属性

占位符：

  • 给日志添加样式，可以突出重要的信息
  • %s：字符串占位符
  • %o：对象占位符
  • %d：数字占位符

Sorce Tab

  • 区域1：页面资源文件目录树
  • 区域2：代码预览区域
  • 区域3：Debug工具栏
    • 从左到右依次为：
      • 暂停（继续）
      • 单步跳过
      • 进入函数
      • 跳出函数
      • 单步执行
      • 激活（关闭）所有断点
      • 代码执行异常处自动
  • 区域4：断点调试器

image.png

Break Point与Watch

  • 使用关键字debugger或代码预览区域的行号可以设置断点
  • 执行到断点处时代码暂停执行
  • 展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
  • 暂停状态下，鼠标hover量可以查看变量的值
  • 在调试器Watch右侧点击+可以添加对变量的监控，查看该变量的值

image.png

Scope与Call Stack

image.png

压缩后的代码如何调试

使用Source Map，利用mappings字段存储源文件和Source Map的映射

  • 英文：表示源码及压缩代码的位置关联
  • 都好：分隔一行代码中的内容
  • 分号：代表换行

映射见：www.murzwin.com/base64vlq.h…

NetWork

image.png

Application

image.png

Performance

image.png

Lighthouse

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

1.真机调试

iOS

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

android

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

2.VConsole

  • 日志(Logs): console.loglinfolerrorl.
  • 网络(Network): XML HttpRequest，Fetch，sendBeacon
  • 节点(Element): HTML节点树
  • 存储(Storage): Cookies，LocalStorage，SessionStorage
  • 手动执行JS命令行
  • 自定义插件

3.使用代理工具调试

原理：

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

以Charles为例:

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

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

常用代理工具：

  • Charles：适合查看、控制网络请求，分析数据
  • Fiddler：与Charles类似，适合windows平台
  • spy-debugger：远程调试手机页面，抓包
  • whistle：基于Node实现的跨平台Web调试代理工具

4.NodeJS调试

Inspectpr Protocol+Chrome Devtool

image.png

Inspector Protocol+VS Code

image.png

5.常用开发调试技巧

线上即时修改Overrides

  • 打开Sources面板下的的Overrides
  • 点击Select folders for Overrides。选择一个本地的空文件夹目录。
  • 允许授权
  • 在page中修改代码，修改完成后command + S保存
  • 打开devTools，点击右上角的三个小点-> More tools ->Changes，就能看到所有修改了

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

image.png

启用本地source map

image.png

使用代理工具Mock数据

image.png

三、课后总结

本章学习了Web调试技术的相关知识，对于前端开发非常重要，通过本次课大致学会了对代码进行调试和优化，大大了提高代码开发效率。对于PC端和移动端的开发调试仍需课后多加学习。

avatar
文章
阅读
粉丝