這是 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