本地修改远端 UI5 框架文件的一个小技巧

举报
Jerry Wang 发表于 2021/09/27 10:49:06 2021/09/27
【摘要】 这是 Jerry 2021 年的第 64 篇文章,也是汪子熙公众号总共第 341 篇原创文章。Jerry 的前一篇文章 纪念特洛伊英雄 Sinon - SAP UI5 Mock Server 使用步骤和工作原理介绍,提到了 SAP UI5 Mock Server,能够在幕后将浏览器原生的 XMLHttpRequest API,替换成基于 Sinon.js 实现的 FakeXMLHttpReq...

这是 Jerry 2021 年的第 64 篇文章,也是汪子熙公众号总共第 341 篇原创文章。

Jerry 的前一篇文章 纪念特洛伊英雄 Sinon - SAP UI5 Mock Server 使用步骤和工作原理介绍,提到了 SAP UI5 Mock Server,能够在幕后将浏览器原生的 XMLHttpRequest API,替换成基于 Sinon.js 实现的 FakeXMLHttpRequest,从而实现为所有 OData 相关的请求,返回事先准备好的 Mock 数据之目的。

文末提到了拦截器 HTTP Interceptor 的概念。在 HTTP 拦截器的工作场景中,HTTP 请求在两个时间点内,可以被框架或者应用开发人员编写的拦截器处理:

  • 程序代码调用 API 发送 HTTP 请求后,在 HTTP 请求实际从浏览器发出之前,由拦截器进行预处理

  • 应用程序得到远端的服务器响应后,在交给其回调函数处理之前,由拦截器进行预处理

本文介绍一个使用拦截器的实际例子。

我们知道 SAP UI5 打开调试模式后,在 Console 控制台会看到很多额外的来自 SAP UI5 框架代码的 log 输出。

Jerry 曾经在 SAP 社区上写过一篇博客,罗列出了我在 SAP CRM Fiori 开发团队工作时,通过单步调试的方式解决的一些 bug:

My UI5 debugging tips and experience collection – how to resolve UI5 issues through debugging by yourself

文章里提到的不少例子,我都在 SAP UI5 框架代码里加上了一些额外的 console.log, 然后观察其运行时打印出的内容。这种方法能帮助我在排除错误和学习 SAP UI5 框架实现原理时,更好地了解其执行细节。

比如文章 深入学习SAP UI5框架代码系列之八:谈谈 SAP UI5 的视图控件 ID,以及其和 Angular 视图的异同 里介绍了 SAP UI5 控件 ID 的生成逻辑:

  • 如果开发人员显式指定了控件 ID,则使用该 ID 生成 HTML 原生标签

  • 如果开发人员没有指定控件 ID,则使用控件元数据里包含的前缀,加上全局计数器自动生成 ID

假设我们想直接在 Chrome 开发者工具 Sources 面板里如上图所示的 SAP UI5 框架文件 ManagedObject-dbg.js 里,添加一行 console.log 语句打印出控件 ID:

保存之后,我们会看到该文件左边有一个小的黄色惊叹号图标,以及一行警告消息:

Changes to this file were not saved to file system.

一旦刷新浏览器,之前对 ManagedObject-dbg.js 的修改就丢失了。

原来,Chrome 开发者工具的 Sources 面板,提供了一个简易的 Workspace(工作区)功能。

我们可以点击上图的加号按钮,将某个本地文件夹添加到 Chrome 开发者工具的工作区中去。接下来,在该本地文件夹内启动 Web 应用,就能在 Chrome 开发者工具 Sources 标签内,看到加载的文件。更妙的是,此时我们直接在 Chrome 开发者工具里编辑加载的文件,修改会自动同步到本地文件中去。

例如,我把名为 walkthrough 的本地文件夹添加到 Chrome 开发者工具的工作区内:

接下来,我在 Chrome 开发者工具里直接编辑该文件夹下的 index.html, 保存。然后重新刷新浏览器,发现之前的修改已经被持久化到本地的 index.html 文件里去了,同时在 Chrome 开发者工具里被修改的文件左边,有一个绿色的圆点作为提示。

在回到之前试图修改的 SAP UI5 框架文件 ManagedObject-dbg.js. 因为我是通过远端加载的方式,从 openui5.hana.ondemand.com 服务器导入 SAP UI5 库文件,因此本地并未存储 SAP UI5 框架文件,所以无法使用 Chrome 开发者工具的工作区映射功能。

此时 HTTP 拦截器就派上用场了。使用拦截器,将浏览器加载 ManagedObject-dbg.js 的请求拦截下来,返回另一个我们事先准备好的加上了 console.log 语句的 JS 文件即可。

这里我使用的拦截器软件是 Fiddle,一个网络抓包工具,可以将网络传输发送与接受的数据包执行截获,编辑,转存,重发等操作。用来实现本文描述的文件请求拦截场景,更是杀鸡用牛刀,小菜一碟。

打开 Fiddle,在监控的网络请求里,找到并选中对 ManagedObject-dbg.js 的请求,打开右侧的 AutoResponder 面板:

勾上 “Enable rules” 之前的 checkbox,维护一条规则,其语义为:如果 Fiddle 检测到一条请求的 url 为规则指定的值,则返回一个事先准备好的,包含了 console.log 的同名本地文件:

刷新浏览器,如今在 Fiddle 面板里能观察到,当请求文件 ManagedObject-dbg.js 时,返回的响应里,确实包含了我们手动添加的 console.log 语句,说明规则执行成功。

然而在 Console 面板里,发现一条和跨域访问相关的错误消息:

Access to XMLHttpRequest has been blocked by CORS policy: No Access-Control-Allow-Origin header is present on the requested resource.

在 Chrome 开发者工具 Network 标签页里查看该请求的响应头部字段,发现果然缺少 Access-Control-Allow-Origin 字段:

Ctrl + R 打开 Fiddle 的自定义规则编辑器:

使用脚本,将缺失的 Access-Control-Allow-Origin 字段添加到响应头部即可:

之后,我们能在 Chrome 开发者工具里看到期望中的被 Fiddle 自定义规则编辑器所添加到 HTTP 响应的头部字段:

为了让我们自定义的 console.log 显示的内容不至于淹没在海量的 SAP UI5 框架日志里,我们可以利用 console.log 函数的第二个格式参数,让我们的打印输出变得醒目一些:

关于该参数的详细用法,请参考我的博客:

Chrome Development Tool tips used in my daily work

希望本文能帮助大家对 Web 开发利器之一,Fiddle 软件的使用有一个直观的感受,感谢阅读。

Jerry 的 SAP UI5 专题

更多Jerry的原创文章,尽在:“汪子熙”.

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200