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

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

Jerry 2018 年的時候，曾經寫過一篇關於 Chrome 開發者工具的文章：**[Jerry 和您聊聊 Chrome 開發者工具](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247484306&idx=1&sn=314d749da91a94064ef1e258657a0974&chksm=ead5b105dda23813addbca28689e3fcc22c0b47cb2d4f49557ec796edfa8fe88c43d2c70567a&scene=21#wechat_redirect)**。

這些開發者工具雖然好用，但是當 Web 應用在移動裝置上執行時，想直接在手機瀏覽器上檢視其使用 console.log 列印出的日誌和除錯資訊，是一件比較麻煩的事情。

比如 Jerry 之前寫過一篇文章：[在 Windows 筆記本上除錯執行在 iOS 裝置上的前端應用](https://zhuanlan.zhihu.com/p/42473228)，介紹瞭如何透過遠端連線的方式，直接在 Windows 電腦上，對執行在 iOS 裝置 Safari 瀏覽器裡的 Web 應用進行單步除錯：

![](https://img-blog.csdnimg.cn/img_convert/92499b8d2c8fb2e2a192ed17930a8232.png)

當然，如果僅僅需要在移動裝置比如手機上執行一下 Web 應用，然後想檢視其列印的除錯資訊，用上述遠端除錯的方式就未免大材小用了。

[vConsole](https://www.npmjs.com/package/vconsole) 是騰訊釋出的一個工具庫，從其獲得的超過一萬三千個 stars，就知道這個庫的受歡迎程度：

![](https://img-blog.csdnimg.cn/img_convert/b914d30725739d58cbaeff3df2a940a1.png)

vConsole 的一種用法是，將其庫檔案下載到本地後，在網頁的 script 標籤裡引用。建立一個 VConsole 例項後，仍然採用正常的 console.log 列印除錯資訊或者日誌。

![](https://img-blog.csdnimg.cn/img_convert/d6c4a04e2810632baa746b0bb736a303.png)

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

![](https://img-blog.csdnimg.cn/img_convert/a8ab74451031fb563c79b200d7337570.png)

點選之後，能開啟一個類似 Chrome 開發者工具的皮膚，從而在裡面能夠看到應用程式使用 console.log 列印出的除錯資訊。

![](https://img-blog.csdnimg.cn/img_convert/8cc21c23ded4cb998d8c7dfe621c8b82.png)

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

![](https://img-blog.csdnimg.cn/img_convert/9eb23b5c477f800fc2af3b5af759d080.png)

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

![](https://img-blog.csdnimg.cn/img_convert/3778907a8bb7ed989774b560cc5b4547.png)

這種引入第三方庫檔案的做法可以工作於 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 應用中的相對路徑。

![](https://img-blog.csdnimg.cn/img_convert/1d78ca9025a8bba305021c296479ba0b.png)

(3)～(4)：透過 sap.ui.define 宣告的 vConsole 依賴，載入完畢後，即可在 SAP UI5 應用控制器的 JavaScript 程式碼里正常使用了。

![](https://img-blog.csdnimg.cn/img_convert/10ac5910422c07131e20e06d03cab35b.png)

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

![](https://img-blog.csdnimg.cn/img_convert/15f495e6e49dc2153c0a1bc2394ad193.png)

點選右下角的 vConsole 按鈕。看到了期望中的由程式碼 console.log 列印出的 Hello World：

![](https://img-blog.csdnimg.cn/img_convert/413b2e38607b227ef97d80582a677481.png)

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

System 皮膚：顯示當前訪問應用的 Url，客戶端版本，使用的網路型別：

![](https://img-blog.csdnimg.cn/img_convert/27e7c31ff54809c2031a3eb8186ef317.png)

Element 皮膚：能檢視該應用在手機上渲染出的原生 HTML 程式碼。比如安卓手機上訪問 SAP UI5 應用，能看到 HTML 原始碼裡包含 data-sap-ui-os="Android8.0.0" 的 UI5 自定義屬性。

![](https://img-blog.csdnimg.cn/img_convert/0ab8cbeb959a226a10a83acb396cff5e.png)

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

Jerry 之前曾經寫過一篇文章，如果需要在 SAP UI5 裡引入一個由第三方庫實現的呼叫裝置攝像頭拍照的功能，也可以將第三方庫封裝成一個 SAP UI5 自定義控制元件(Custom Control). 實現細節參考我的文章：[**如何在SAP UI5應用裡新增使用攝像頭拍照的功能**](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247487536&idx=1&sn=461b4da8a822babfd449259baa738550&chksm=ead5a2a7dda22bb11d837551ad40072e93787fb7b8b72aeb4fda2157592c8af093b516338e41&scene=21#wechat_redirect)。

![](https://img-blog.csdnimg.cn/img_convert/b112bba032aa084e801c7611d88d8132.png)

本文例子的原始碼：

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

感謝閱讀。

**更多閱讀**

*   [在沒有任何前端開發經驗的基礎上, 建立第一個 SAP Fiori Elements 應用](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492035&idx=1&sn=8373625310d71b4c8cc73612756a8168&chksm=ead65354dda1da4239a6442c577efee19b826d92b7372d4a551cd7af1957bd82fc002e34c2fe&scene=21#wechat_redirect)

*   [答網友提問：使用 SAP Fiori Tools 建立的 Fiori Elements 應用，如何進行二次開發？](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492113&idx=1&sn=5d004d151e59ac262a15fdf79869934c&chksm=ead65086dda1d99092e784b7937cc23a6641f7692e0048d31412c427e8042fa071a9fe8f4691&scene=21#wechat_redirect)

*   [本地開發好的 SAP Fiori Elements 應用，如何部署到 ABAP 伺服器上](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492152&idx=1&sn=b4f365a645779e1c57064b747d64ea61&chksm=ead650afdda1d9b9761fef55001935a8bd12aeda621a78edeafa7ee4cc154121bf76d7ab42c1&scene=21#wechat_redirect)

*   [深入掌握 SAP Fiori Elements 工作原理的前提條件：理解 Smart Field](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492283&idx=1&sn=716ba26a34b3cb071ba58c74945ad9da&chksm=ead6502cdda1d93a7c4b2efc5144ed77dfd619edd045e3ca7dcdd0e74221b605ad54b06fe4b6&scene=21#wechat_redirect)

*   [深入理解 SAP Fiori Elements 工作原理系列之二：如何給 SAP Fiori Elements 應用新增自定義按鈕](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492320&idx=1&sn=8e294788e4002f1a1d2efd00d075eee0&chksm=ead65077dda1d961f69684f665d4ad0be1b442a2e316b633a05834c75d50f3198e7a6efdb781&scene=21#wechat_redirect)

*   [SAP Fiori Elements 框架裡 Smart Table 控制元件的工作原理介紹](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492348&idx=1&sn=f134e5418350197afcae1d4836de9be0&chksm=ead6506bdda1d97d5401bb675857409d4ea09897b86fdaa639fc72fd74116c4e7a2bbd1d7d0d&scene=21#wechat_redirect)

*   [SAP Fiori Elements List Report Smart Table 列專案寬度計算的奧妙](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492410&idx=1&sn=fb80aeae21e11046848a6d67951374ce&chksm=ead651addda1d8bbdd08ee6c24c60116b45511c752b0b09b2cf20226bb1e1b0eff7ac495ef28&scene=21#wechat_redirect)

*   [作為一名 ABAP 資深顧問，下一步可以選擇哪一門 SAP 技術作為主攻方向？](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492596&idx=1&sn=fe2ee727f1bad79006dd6fd13e875a89&chksm=ead65163dda1d875118de8db11f7aa64706e0428bce3c0b387c27ee31a76e11119e24e42049a&scene=21#wechat_redirect)

*   [SAP UI5應用開發人員瞭解UI5框架程式碼的意義](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490624&idx=1&sn=355253156bec497d2d51925010feb8c1&chksm=ead5aed7dda227c1dd97a0ba5d24eb1d91415eadca97ec0f540cf49beaa6a699d734d5ce4f2c&scene=21#wechat_redirect)

*   [SAP UI5 module懶載入機制](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490700&idx=1&sn=5aa8829849e249b31cc390e644b0cc6b&chksm=ead5ae1bdda2270d5c99f2e6b0649f4ad3e4eafc00f43be88fa89cfce8de134d0db24db3d9e7&scene=21#wechat_redirect)

*   [SAP UI5 控制元件渲染機制](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490725&idx=1&sn=a99eaa85624d62fd9a8d5eb0fe382ace&chksm=ead5ae32dda2272447f691827b4a960dac4188adb9c82f8c29815531ba9a7939530153b00f17&scene=21#wechat_redirect)

*   [HTML原生事件 VS SAP UI5 Semantic事件](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490756&idx=1&sn=72ad4fbfc919bc53a136ac2871890e46&chksm=ead5ae53dda227453a4e9d92400a6c2e17957b3040db928102d42a86a7d295d023b938c2c1ec&scene=21#wechat_redirect)

*   [SAP UI5控制元件後設資料的後設資料實現](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491142&idx=1&sn=82b67f87d392f7e6a9c233f5a3f9b14b&chksm=ead5acd1dda225c7bec3b4c41e80c189a8b74359ececbff761bebacd2f8189633cac5f7a84a2&scene=21#wechat_redirect)

*   [SAP UI5控制元件的例項資料修改和讀取邏輯](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491167&idx=1&sn=5b69e73118bfee9f399d941bc4be026f&chksm=ead5acc8dda225de8e92d10c3909280dfcb7d754b985ba268c1ed5e836137709ef23ac140744&scene=21#wechat_redirect)

*   [SAP UI5控制元件資料繫結的實現原理](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491196&idx=1&sn=d5516ab572a9a292f40014361ddc1453&chksm=ead5acebdda225fd6cc100f2a5f9281d30aaeb238aa3801473c20614f093fb074c9c179337d5&scene=21#wechat_redirect)

*   [SAP UI5控制元件資料繫結的三種模式：One Way, Two Way和OneTime實現原理比較](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491221&idx=1&sn=abaecc29eec83383f38ef5d79e98fa79&chksm=ead5ac02dda22514745c0762ecbed0b56116d9c80595cb1f4bc5fb863629da60cd71edefdd54&scene=21#wechat_redirect)

*   [談談 SAP UI5 的檢視控制元件 ID，以及其和 Angular 檢視的異同](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492187&idx=1&sn=a8dbaa645c472b5c22771e512ed1b971&chksm=ead650ccdda1d9dab86ba16fb71ea5e90aa15918f3e3ac2c4237c9f5f03d51a12dac40280e70&scene=21#wechat_redirect)

*   [對 SAP UI5 一無所知的新手，從哪些材料開始學習比較好？](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492258&idx=1&sn=7d3910109f2721dc316c0b8890091690&chksm=ead65035dda1d923924a5b186d4296a65d6efe2d08d8f4705abc52c42b349b2e95c255337f21&scene=21#wechat_redirect)

如何在SAP UI5應用中整合第三方庫:一個在移動裝置上檢視Web應用列印除錯資訊的小技巧

相關文章