前端开发调试知识 | 青训营笔记

用户8410528126154
156 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的第9天

写代码就避免不了bug，因此了解必要的开发调试知识很有必要，今天就来学习一下相关知识。

一、Bug与Debug

1.Bug的产生

第一个bug

image.png

bug or feature

image.png

Node Code,No Bug

image.png

前端Debug的特点

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

二、Chrome DevTools

1.动态修改元素和样式

image.png

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

image.png

2.Console

image.png

  • console.log
  • console.warn
  • console.error
  • console.debug
  • console.info
  • console.table
  • 具象化的展示了JSON和数组数据
  • console.dir
  • 通过类似文件数的方式展示对象的属性
  • 占位符
  • 给日志添加样式，可以突出重要的信息
  • %s：字符串占位符
  • %o：对象占位符
  • %c：样式占位符
  • %d：数字占位符

3.Sorce Tab

image.png

区域1：页面资源文件目录树

区域2 ：代码预览区域

区域3：Debug工具栏 从左至右依次为：

  • 暂停（继续）
  • 单步跳过
  • 进入函数
  • 跳出函数
  • 单步执行
  • 激活（关闭）所有断点
  • 代码执行异常处自动

区域4：断点调试器

3.1 Break Point 与 Watch

image.png

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

3.2 Scope 与 Call Stack

image.png

  • 展开Scope可以查看作用域列表（包含闭包）
  • 展开Call Stack可以查看当前JavaScriptdiamante的调用栈

三、移动端 H5 调试

1.真机调试

iOS

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

注：没有iPhone设备可以再Mac App Store安装Xcode使用其内置的iOS模拟器

Android

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

注：直接使用手机扫码查看，体验更加

2.VConsole

image.png

  • 日志（logs）：console.log|info|error|...
  • 网络（network）：XMLHttpRequest,Fetch,sendBeacon
  • 节点（element）：HTML节点树
  • 存储（Storage）：Cookies,LocalStorage,SessionStorage
  • 手动执行JS命令行
  • 自定义插件

3.使用代理工具调试

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

以Charles为例：

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

image.png

4.常使用的代理工具

Charles：适合查看、控制网络请求，分析数据

image.png

Fiddler：与Charles类似，适合Windows平台

image.png

spy-debugger：远程调试手机页面，抓包

image.png

Whistle：基于Node实现的跨平台Web调试代理工具

image.png

四、NodejS调试

1.Inspector Protocal + Chrome Devtool

1.执行命令 node --inspect=8888 index.js image.png

2.chrome浏览器访问服务

image.png

3.点击绿色node图标打开node调试面板（在chrome://inspect/#device 中配置network target）

image.png

4.在node调试面板中使用断点调试

image.png

image.png

VS Code 点击运行 添加配置 启动调试 添加断点 查看变量、堆栈

五、常用开发调试技巧

1.线上即时修改Overrides

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

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

image.png

3.启用本地 source map

image.png

线上不存在Source Map 时可以使用Map Local网络映射功能呢过来访问本地的Source Map 文件。

4.使用代理工具Mock数据

image.png

右键选中要mock 数据的接口，选择save response，保存文件到本地。 本地打开保存的文件，编辑想mock的数据并保存。 邮件选中第一部的接口，选择M安排Local，Local Path 选择第二部的文件。

avatar
文章
阅读
粉丝