這是 Jerry 2021 年的第 43 篇文章，也是汪子熙公眾號總共第 320 篇原創文章。

做 Web 開發的程序員，無論使用 SAP UI5，還是 Angular，React，Vue，每天都離不開 Chrome / Firefox 開發者工具。

Jerry 2018 年的時候，曾經寫過一篇關于 Chrome 開發者工具的文章：Jerry 和您聊聊 Chrome 開發者工具。

這些開發者工具雖然好用，但是當 Web 應用在移動設備上運行時，想直接在手機瀏覽器上查看其使用 console.log 打印出的日志和調試信息，是一件比較麻煩的事情。

比如 Jerry 之前寫過一篇文章：在 Windows 筆記本上調試運行在 iOS 設備上的前端應用，介紹了如何通過遠程連接的方式，直接在 Windows 電腦上，對運行在 iOS 設備 Safari 瀏覽器里的 Web 應用進行單步調試：

當然，如果僅僅需要在移動設備比如手機上運行一下 Web 應用，然后想查看其打印的調試信息，用上述遠程調試的方式就未免大材小用了。

vConsole 是騰訊發布的一個工具庫，從其獲得的超過一萬三千個 stars，就知道這個庫的受歡迎程度：

vConsole 的一種用法是，將其庫文件下載到本地后，在網頁的 script 標簽里引用。創建一個 VConsole 實例后，仍然采用正常的 console.log 打印調試信息或者日志。

此時渲染出的網頁右下角，會出現一個綠色的 vConsole 按鈕：

點擊之后，能打開一個類似 Chrome 開發者工具的面板，從而在里面能夠看到應用程序使用 console.log 打印出的調試信息。

然而，Jerry 的 SAP 技術交流群里，有個朋友想在 SAP UI5 應用里使用 vConsole，但是發現不工作。

這位朋友直接按照 vConsole 的教程，在 SAP UI5 應用的 index.html 里通過 script 標簽引入 vConsole.

這種引入第三方庫文件的做法可以工作于 Angular，React 或者 Vue，然而并不是 SAP 推薦的在 SAP UI5 里使用第三方庫的方式。因為絕大多數標準的 SAP UI5 應用的使用場景，都是通過 Fiori Launchpad 作為入口來訪問的。這種情況下，SAP UI5 應用的入口是 Component.js, 而不是 index.html.

正確的做法：

(1)在 SAP UI5 工程里，新建一個 lib 文件夾，把 vConsole 庫文件放進去。

(2)在需要使用 vConsole 功能的控制器實現里，使用 sap.ui.define 聲明 VConsole 的依賴路徑。如下圖標號 2 所示。這個依賴路徑分為兩部分，前半部分 sap/ui/demo/CombineLatest 是將該 SAP UI5 應用的命名空間 sap.ui.demo.CombineLatest 里所有的 . 替換成 / 的結果，后半部分就是 VConsole 庫文件在 SAP UI5 應用中的相對路徑。

(3)～(4)：通過 sap.ui.define 聲明的 vConsole 依賴，加載完畢后，即可在 SAP UI5 應用控制器的 JavaScript 代碼里正常使用了。

最后試試效果，在手機上訪問這個 SAP UI5 應用：

點擊右下角的 vConsole 按鈕。看到了期望中的由代碼 console.log 打印出的 Hello World：

除了 Log 之外，這個 VConsole 還提供了一些其他的實用面板。

System 面板：顯示當前訪問應用的 Url，客戶端版本，使用的網絡類型：

Element 面板：能查看該應用在手機上渲染出的原生 HTML 代碼。比如安卓手機上訪問 SAP UI5 應用，能看到 HTML 源代碼里包含 data-sap-ui-os=“Android8.0.0” 的 UI5 自定義屬性。

當然，在 SAP UI5 應用里使用第三方庫，絕對不止本文所提到的這一種方式。

Jerry 之前曾經寫過一篇文章，如果需要在 SAP UI5 里引入一個由第三方庫實現的調用設備攝像頭拍照的功能，也可以將第三方庫封裝成一個 SAP UI5 自定義控件(Custom Control). 實現細節參考我的文章：如何在SAP UI5應用里添加使用攝像頭拍照的功能。

本文例子的源代碼：

https://github.com/wangzixi-diablo/ui5-toolset/tree/main/combineLatest

感謝閱讀。

更多Jerry的原創文章，盡在：“汪子熙”:

更多閱讀

• 在沒有任何前端開發經驗的基礎上, 創建第一個 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 应用中集成第三方库 ：一个在移动设备上查看 Web 应用打印调试信息的小技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

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