這是 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的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的本地修改远端 SAP UI5 框架文件的一个小技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。