这是 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 专题
- 在没有任何前端开发教训的根底上, 创立第一个 SAP Fiori Elements 利用
- 答网友发问：应用 SAP Fiori Tools 创立的 Fiori Elements 利用，如何进行二次开发？
- 本地开发好的 SAP Fiori Elements 利用，如何部署到 ABAP 服务器上
- 深刻把握 SAP Fiori Elements 工作原理的前提条件：了解 Smart Field
- 深刻了解 SAP Fiori Elements 工作原理系列之二：如何给 SAP Fiori Elements 利用增加自定义按钮
- SAP Fiori Elements 框架里 Smart Table 控件的工作原理介绍
- SAP Fiori Elements List Report Smart Table 列我的项目宽度计算的奥秘
- 作为一名 ABAP 资深参谋，下一步能够抉择哪一门 SAP 技术作为主攻方向？
- SAP UI5 利用开发人员理解 UI5 框架代码的意义
- SAP UI5 module 懒加载机制
- SAP UI5 控件渲染机制
- HTML 原生事件 VS SAP UI5 Semantic 事件
- SAP UI5 控件元数据的元数据实现
- SAP UI5 控件的实例数据批改和读取逻辑
- SAP UI5 控件数据绑定的实现原理
- SAP UI5 控件数据绑定的三种模式：One Way, Two Way 和 OneTime 实现原理比拟
- 谈谈 SAP UI5 的视图控件 ID，以及其和 Angular 视图的异同
- 对 SAP UI5 无所不知的老手，从哪些资料开始学习比拟好？
- SAP UI5 OData 流言粉碎机：极短时间内发送两个 Odata request, 前一个会主动被 cancel 掉吗？
- SAP UI 搜寻分页技术
- 如何在 SAP UI5 利用中集成第三方库：一个在挪动设施上查看 Web 利用打印调试信息的小技巧
- 基于 OData 模型和 JSON 模型的 SAP UI5 表格控件行我的项目的增加和删除实现
- 留念特洛伊英雄 Sinon – SAP UI5 Mock Server 应用步骤和工作原理介绍
更多 Jerry 的原创文章，尽在：” 汪子熙 ”: