这是杰瑞2021年的第64篇文章，也是王子熙第341篇原创文章公众号。Jerry上一篇纪念木马英雄Sinon-SAPUI5MockServer使用步骤和工作原理，提到了SAPUI5MockServer，可以用基于Sinon.js实现的FakeXMLHttpRequest替代浏览器后台的原生XMLHttpRequestAPI，从而实现为所有OData相关请求返回预先准备好的Mock数据的目的。拦截器HTTPInterceptor的概念在文末有提到。在HTTP拦截器的工作场景中，HTTP请求可以在两个时间点被框架或者应用开发者编写的拦截器处理：程序代码调用API发送HTTP请求之后，HTTP请求真正被处理之前从浏览器发送过来，由拦截器进行预处理应用程序得到远程服务器的响应后，先由拦截器进行预处理，然后交给它的回调函数处理。本文介绍一个使用拦截器的实际例子。我们知道SAPUI5开启debug模式后，在Console控制台中会看到SAPUI5框架代码额外输出了很多日志。Jerry曾经在SAP社区写过一篇博客，列举了我在SAPCRMFiori开发组工作时通过单步调试解决的一些bug：我的UI5调试技巧和经验合集——如何解决UI5问题对于通过自己调试文章中提到的很多例子，我在SAPUI5框架代码中添加了一些额外的console.log，然后观察运行时打印出来的内容。这种方法帮助我在排查错误和学习SAPUI5框架实现背后的原理时更好地理解SAPUI5框架的实现细节。比如深入研究SAPUI5框架代码系列第八篇：谈谈SAPUI5的视图控件ID，以及它和Angular视图的异同。使用此ID生成HTML原生标签如果开发者没有指定控件ID，则使用控件元数据中包含的前缀，加上全局计数器自动生成ID假设我们想直接在Chrome开发者工具Sources面板中如图在上图中SAP的UI5框架文件ManagedObject-dbg.js中，添加console.log语句打印出控件ID：保存后，我们会在文件左侧看到一个黄色的感叹号小图标，和一行警告消息：对此文件的更改未保存到文件系统。刷新浏览器后，以前对ManagedObject-dbg.js的修改将丢失。原来Chrome开发者工具的Sources面板提供了一个简单的Workspace（工作区）功能。我们可以点击上图中的加号按钮，将本地文件夹添加到Chrome开发者工具的工作区中。接下来，启动本地文件夹下的web应用，在Chrome开发者工具的Sources选项卡中就可以看到加载的文件了。更好的是，此时我们直接在Chrome开发者工具中编辑加载的文件，修改会自动同步到本地文件。例如，我在Chrome开发者工具的工作空间中添加了一个名为walkthrough的本地文件夹：接下来，我在Chrome开发者工具中直接编辑了该文件夹下的index.html，并保存。然后刷新浏览器，发现之前的修改已经持久化到本地的index.html文件中了。同时在Chrome开发者工具中修改后的文件左侧有绿点提醒。我在返回之前尝试修改的SAPUI5框架文件ManagedObject-dbg.js。因为我是通过远程加载从openui5.hana.ondemand.com服务器导入SAPUI5库文件，SAPUI5框架没有存储在本地文件，所以无法使用ChromeDeveloperTools工作区映射功能。这就是HTTP拦截器派上用场的地方。使用拦截器拦截浏览器加载ManagedObject-dbg.js的请求，返回另外一个JS文件，里面有我们事先准备好的console.log语句。我这里使用的拦截器软件是Fiddle，一个网络抓包工具，可以拦截、编辑、转储和重发通过网络发送和接收的数据包。实现本文描述的文件请求拦截场景是小菜一碟。打开Fiddle，在监听的网络请求中找到ManagedObject-dbg.js的请求并选中，打开右侧的AutoResponder面板：勾选“Enablerules”前的复选框，维护一条规则，其语义为：如果Fiddle检测到如果请求的url为规则指定的值，返回一个预先准备好的包含console.log的同名本地文件：刷新浏览器，现在在Fiddle面板中可以观察到当文件ManagedObject-dbg请求了.js，返回的response中确实有我们手动添加的console.log语句，说明规则执行成功。但是，在控制台面板中，我发现了一条与跨域访问相关的错误信息：AccesstoXMLHttpRequesthasbeenblockedbyCORSpolicy:NoAccess-Control-Allow-Originheaderispresentontherequestedresource。在ChromeDeveloperToolsNetwork选项卡中查看页面请求的responseheader字段，发现缺少Access-Control-Allow-Origin字段：Ctrl+R打开Fiddle的自定义规则编辑器：使用脚本添加缺失的Access-Control-Allow-Origin字段在响应头中即可：之后我们可以在Chrome开发者工具中看到Fiddle自定义规则编辑器添加到HTTP响应中的预期头字段：为了让我们的自定义控制台。日志显示内容不会淹没在海量的SAPUI5框架日志中，我们可以使用console.log函数的第二个格式参数让我们的打印输出更加醒目：这个参数的详细用法可以参考我的博客：日常工作中用到的Chrome开发工具小技巧希望这篇文章能帮助大家对Web开发工具之一的Fiddle软件的使用有一个直观的感受，感谢阅读。Jerry的SAPUI5题目，在没有任何前端开发经验的情况下，创建了第一个SAPFioriElements应用来回答网友的问题：如何对使用SAPFioriTools创建的FioriElements应用进行二次开发？如何将本地开发的SAPFioriElements应用部署到ABAP服务器深入理解SAPFioriElements工作原理的前提：理解SmartField深入理解SAPFioriElements工作原理系列之二：如何添加自定义SAPFioriElements应用按钮SAPFioriElements框架中SmartTable控件的工作原理介绍SAPFioriElementsListReportSmartTable中计算列项宽度的奥秘作为ABAP资深顾问，SAP技术可以你选择作为下一步的主要进攻方向？SAPUI5应用开发者理解UI5框架代码含义SAPUI5模块懒加载机制SAPUI5控件渲染机制HTML原生事件VSSAPUI5语义事件元数据SAPUI5控件元数据实现实例数据修改和读取逻辑SAPUI5控件的实现原理SAPUI5控件数据绑定SAPUI5控件数据绑定的三种模式：OneWay、TwoWay和OneTime实现原理比较说说SAPUI5的视图控件ID，以及它与Angular视图的异同。对于了解不多的初学者，从什么资料开始学习比较好？SAPUI5OData辟谣者：极短时间内发送两个Odata请求，前一个会自动取消吗？SAPUI搜索和分页技术如何在SAPUI5应用中集成第三方库：一个在移动设备上查看web应用打印调试信息的小技巧基于OData模型和JSON模型的SAPUI5表单控制行项的增删纪念特洛伊的实现英雄Sinon-SAPUI5MockServer使用步骤及工作原理介绍更多Jerry原创文章，尽在：《汪子熙》：
