這是 Jerry 2021 年的第 64 篇文章，也是汪子熙公眾號(hào)總共第 341 篇原創(chuàng)文章。

八陣圖

杜甫

功蓋三分國(guó)，

名成八陣圖。

江流石不轉(zhuǎn)，

遺恨失吞吳。

Jerry 的前一篇文章 紀(jì)念特洛伊英雄 Sinon - SAP UI5 Mock Server 使用步驟和工作原理介紹，提到了 SAP UI5 Mock Server，能夠在幕后將瀏覽器原生的 XMLHttpRequest API，替換成基于 Sinon.js 實(shí)現(xiàn)的 FakeXMLHttpRequest，從而實(shí)現(xiàn)為所有 OData 相關(guān)的請(qǐng)求，返回事先準(zhǔn)備好的 Mock 數(shù)據(jù)之目的。

文末提到了攔截器 HTTP Interceptor 的概念。在 HTTP 攔截器的工作場(chǎng)景中，HTTP 請(qǐng)求在兩個(gè)時(shí)間點(diǎn)內(nèi)，可以被框架或者應(yīng)用開發(fā)人員編寫的攔截器處理：

• 程序代碼調(diào)用 API 發(fā)送 HTTP 請(qǐng)求后，在 HTTP 請(qǐng)求實(shí)際從瀏覽器發(fā)出之前，由攔截器進(jìn)行預(yù)處理

• 應(yīng)用程序得到遠(yuǎn)端的服務(wù)器響應(yīng)后，在交給其回調(diào)函數(shù)處理之前，由攔截器進(jìn)行預(yù)處理

本文介紹一個(gè)使用攔截器的實(shí)際例子。

我們知道 SAP UI5 打開調(diào)試模式后，在 Console 控制臺(tái)會(huì)看到很多額外的來(lái)自 SAP UI5 框架代碼的 log 輸出。

Jerry 曾經(jīng)在 SAP 社區(qū)上寫過(guò)一篇博客，羅列出了我在 SAP CRM Fiori 開發(fā)團(tuán)隊(duì)工作時(shí)，通過(guò)單步調(diào)試的方式解決的一些 bug：

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

https://blogs./2016/04/30/my-ui5-debugging-tips-and-experience-collection-how-to-resolve-ui5-issues-through-debugging-by-yourself/

文章里提到的不少例子里，我都在 SAP UI5 框架代碼里加上了一些額外的 console.log, 然后觀察其運(yùn)行時(shí)打印出的內(nèi)容。這種方法能幫助我在排除錯(cuò)誤和學(xué)習(xí) SAP UI5 框架實(shí)現(xiàn)原理時(shí)，更好地了解其執(zhí)行細(xì)節(jié)。

比如文章 深入學(xué)習(xí)SAP UI5框架代碼系列之八：談?wù)?SAP UI5 的視圖控件 ID，以及其和 Angular 視圖的異同 里介紹了 SAP UI5 控件 ID 的生成邏輯：

• 如果開發(fā)人員顯式指定了控件 ID，則使用該 ID 生成 HTML 原生標(biāo)簽

• 如果開發(fā)人員沒(méi)有指定控件 ID，則使用控件元數(shù)據(jù)里包含的前綴，加上全局計(jì)數(shù)器自動(dòng)生成 ID

假設(shè)我們想直接在 Chrome 開發(fā)者工具 Sources 面板里如上圖所示的 SAP UI5 框架文件 ManagedObject-dbg.js 里，添加一行 console.log 語(yǔ)句打印出控件 ID：

保存之后，我們會(huì)看到該文件左邊有一個(gè)小的黃色驚嘆號(hào)圖標(biāo)，以及一行警告消息：

Changes to this file were not saved to file system.

一旦刷新瀏覽器，之前對(duì) ManagedObject-dbg.js 的修改就丟失了。

原來(lái)，Chrome 開發(fā)者工具的 Sources 面板，提供了一個(gè)簡(jiǎn)易的 Workspace(工作區(qū))功能。

我們可以點(diǎn)擊上圖的加號(hào)按鈕，將某個(gè)本地文件夾添加到 Chrome 開發(fā)者工具的工作區(qū)中去。

接下來(lái)，在該本地文件夾內(nèi)啟動(dòng) Web 應(yīng)用，就能在 Chrome 開發(fā)者工具 Sources 標(biāo)簽內(nèi)，看到加載的文件。更妙的是，此時(shí)我們直接在 Chrome 開發(fā)者工具里編輯加載的文件，修改會(huì)自動(dòng)同步到本地文件中去。

例如，我把名為 walkthrough 的本地文件夾添加到 Chrome 開發(fā)者工具的工作區(qū)內(nèi)：

接下來(lái)，我在 Chrome 開發(fā)者工具里直接編輯該文件夾下的 index.html, 保存。然后重新刷新瀏覽器，發(fā)現(xiàn)之前的修改已經(jīng)被持久化到本地的 index.html 文件里去了，同時(shí)在 Chrome 開發(fā)者工具里被修改的文件左邊，有一個(gè)綠色的圓點(diǎn)作為提示。

在回到之前試圖修改的 SAP UI5 框架文件 ManagedObject-dbg.js. 因?yàn)槲沂峭ㄟ^(guò)遠(yuǎn)端加載的方式，從 openui5.hana.ondemand.com 服務(wù)器導(dǎo)入 SAP UI5 庫(kù)文件，因此本地并未存儲(chǔ) SAP UI5 框架文件，所以無(wú)法使用 Chrome 開發(fā)者工具的工作區(qū)映射功能。

此時(shí) HTTP 攔截器就派上用場(chǎng)了。使用攔截器，將瀏覽器加載 ManagedObject-dbg.js 的請(qǐng)求攔截下來(lái)，返回另一個(gè)我們事先準(zhǔn)備好的加上了 console.log 語(yǔ)句的 JS 文件即可。

這里我使用的攔截器軟件是 Fiddle，一個(gè)網(wǎng)絡(luò)抓包工具，可以將網(wǎng)絡(luò)傳輸發(fā)送與接受的數(shù)據(jù)包執(zhí)行截獲，編輯，轉(zhuǎn)存，重發(fā)等操作。用來(lái)實(shí)現(xiàn)本文描述的文件請(qǐng)求攔截場(chǎng)景，更是殺雞用牛刀，小菜一碟。

打開 Fiddle，在監(jiān)控的網(wǎng)絡(luò)請(qǐng)求里，找到并選中對(duì) ManagedObject-dbg.js 的請(qǐng)求，打開右側(cè)的 AutoResponder 面板：

勾上 "Enable rules" 之前的 checkbox，維護(hù)一條規(guī)則，其語(yǔ)義為：如果 Fiddle 檢測(cè)到一條請(qǐng)求的 url 為規(guī)則指定的值，則返回一個(gè)事先準(zhǔn)備好的，包含了 console.log 的同名本地文件：

刷新瀏覽器，如今在 Fiddle 面板里能觀察到，當(dāng)請(qǐng)求文件 ManagedObject-dbg.js 時(shí)，返回的響應(yīng)里，確實(shí)包含了我們手動(dòng)添加的 console.log 語(yǔ)句，說(shuō)明規(guī)則執(zhí)行成功。

然而在 Console 面板里，發(fā)現(xiàn)一條和跨域訪問(wèn)相關(guān)的錯(cuò)誤消息：

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

在 Chrome 開發(fā)者工具 Network 標(biāo)簽頁(yè)里查看該請(qǐng)求的響應(yīng)頭部字段，發(fā)現(xiàn)果然缺少 Access-Control-Allow-Origin 字段：

Ctrl + R 打開 Fiddle 的自定義規(guī)則編輯器：

使用腳本，將缺失的 Access-Control-Allow-Origin 字段添加到響應(yīng)頭部即可：

之后，我們能在 Chrome 開發(fā)者工具里看到期望中的被 Fiddle 自定義規(guī)則編輯器所添加到 HTTP 響應(yīng)的頭部字段：

為了讓我們自定義的 console.log 顯示的內(nèi)容不至于淹沒(méi)在海量的 SAP UI5 框架日志里，我們可以利用 console.log 函數(shù)的第二個(gè)格式參數(shù)，讓我們的打印輸出變得醒目一些：

關(guān)于該參數(shù)的詳細(xì)用法，請(qǐng)參考我的博客：

Chrome Development Tool tips used in my daily work

https://blogs./2016/03/15/chrome-development-tool-tips-used-in-my-daily-work/

希望本文能幫助大家對(duì) Web 開發(fā)利器之一，F(xiàn)iddle 軟件的使用有一個(gè)直觀的感受，感謝閱讀。

Jerry 的 SAP UI5 專題

• 在沒(méi)有任何前端開發(fā)經(jīng)驗(yàn)的基礎(chǔ)上, 創(chuàng)建第一個(gè) SAP Fiori Elements 應(yīng)用

• 答網(wǎng)友提問(wèn)：使用 SAP Fiori Tools 創(chuàng)建的 Fiori Elements 應(yīng)用，如何進(jìn)行二次開發(fā)？

• 本地開發(fā)好的 SAP Fiori Elements 應(yīng)用，如何部署到 ABAP 服務(wù)器上

• 深入掌握 SAP Fiori Elements 工作原理的前提條件：理解 Smart Field

• 深入理解 SAP Fiori Elements 工作原理系列之二：如何給 SAP Fiori Elements 應(yīng)用添加自定義按鈕

• SAP Fiori Elements 框架里 Smart Table 控件的工作原理介紹

• SAP Fiori Elements List Report Smart Table 列項(xiàng)目寬度計(jì)算的奧妙

• 作為一名 ABAP 資深顧問(wèn)，下一步可以選擇哪一門 SAP 技術(shù)作為主攻方向？

• SAP UI5應(yīng)用開發(fā)人員了解UI5框架代碼的意義

• SAP UI5 module懶加載機(jī)制

• SAP UI5 控件渲染機(jī)制

• HTML原生事件 VS SAP UI5 Semantic事件

• SAP UI5控件元數(shù)據(jù)的元數(shù)據(jù)實(shí)現(xiàn)

• SAP UI5控件的實(shí)例數(shù)據(jù)修改和讀取邏輯

• SAP UI5控件數(shù)據(jù)綁定的實(shí)現(xiàn)原理

• SAP UI5控件數(shù)據(jù)綁定的三種模式：One Way, Two Way和OneTime實(shí)現(xiàn)原理比較

• 談?wù)?SAP UI5 的視圖控件 ID，以及其和 Angular 視圖的異同

• 對(duì) SAP UI5 一無(wú)所知的新手，從哪些材料開始學(xué)習(xí)比較好？

• SAP UI5 OData謠言粉碎機(jī)：極短時(shí)間內(nèi)發(fā)送兩個(gè)Odata request,前一個(gè)會(huì)自動(dòng)被cancel掉嗎？

• SAP UI 搜索分頁(yè)技術(shù)

• 如何在 SAP UI5 應(yīng)用中集成第三方庫(kù) ：一個(gè)在移動(dòng)設(shè)備上查看 Web 應(yīng)用打印調(diào)試信息的小技巧

• 基于 OData 模型和 JSON 模型的 SAP UI5 表格控件行項(xiàng)目的添加和刪除實(shí)現(xiàn)

• 紀(jì)念特洛伊英雄 Sinon - SAP UI5 Mock Server 使用步驟和工作原理介紹