如何在 SAP UI5 應用中集成第三方庫：一個在移動設備上查看 Web 應用打印調試信息的小技巧

時間 2021-06-22

標籤 html 前端 git 程序員 github npm 瀏覽器服務器網絡框架欄目 HTML 简体版

原文原文鏈接

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

作 Web 開發的程序員，不管使用 SAP UI5，仍是 Angular，React，Vue，天天都離不開 Chrome / Firefox 開發者工具。前端

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

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

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

固然，若是僅僅須要在移動設備好比手機上運行一下 Web 應用，而後想查看其打印的調試信息，用上述遠程調試的方式就未免大材小用了。npm

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-d...

感謝閱讀。

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