关键词：
这是 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的原创文章，尽在："汪子熙":
更多阅读
如何在条码扫描仪的移动 web 应用程序中集成 Phonegap 插件？
】如何在条码扫描仪的移动web应用程序中集成Phonegap插件？【英文标题】：HowtoIntegratingPhonegapplugininMobilewebappforBarcodescanner?【发布时间】：2014-03-1409:51:19【问题描述】：我们正在尝试在我们的移动网络应用程序中集成用于条码扫... 查看详情
基于 Expo 在 React Native 应用中集成华为移动服务
...：我已经基于ExpoSDK开发了一个带有ReactNative的应用程序，如何将HMS集成到我的项目中以使其适用于Huawei设备？我应该引入条件分支以使用expo-location而不是hm 查看详情
我们如何在 iphone 应用程序中集成支付网关？ [关闭]
...:03【问题描述】：如何在iPhone应用中实现支付网关？还有第三方支付网关被app拒绝的问题吗？【问题讨论】：【参考方案1】：请不要尝试自行创建支付网关，除非您完全熟悉编程、安全性并且完全了解所涉及的所有内容。涉及... 查看详情
如何在 PhoneGap 应用程序中集成/使用 `WKWebView` 插件
】如何在PhoneGap应用程序中集成/使用`WKWebView`插件【英文标题】：Howtointegrate/use`WKWebView`plugininPhoneGapapplication【发布时间】：2016-04-2204:04:08【问题描述】：我有一个PhonegapiOS应用程序，我在其中使用AngularKendo移动框架来构建UI。我... 查看详情
如何在 Android 应用程序中集成 TEST PayU 支付网关？
】如何在Android应用程序中集成TESTPayU支付网关？【英文标题】：HowtointegrateTESTPayUPaymentGatewayinandroidapplication?【发布时间】：2015-09-1120:15:57【问题描述】：我是支付网关的新手。目前，我正在开发一个移动应用程序，我需要将PayU... 查看详情
如何在我的 delphi 应用程序中集成类似的 diagam 功能？
...中使用一些类似于下图的图表/绘图，尤其是无需为任何第三方组件付费。知道从哪里开始吗？【问题讨论】：我不知道任何免费的图表组件，但是您已经粘贴了SENukeX的屏幕截图 查看详情
在 asp.net mvc Web 应用程序中集成第三方应用程序的 SAML SSO
】在asp.netmvcWeb应用程序中集成第三方应用程序的SAMLSSO【英文标题】：SAMLSSOintegrationforthirdpartyappinsideasp.netmvcwebapplication【发布时间】：2021-12-0913:13:28【问题描述】：我们在本地托管了一个现有的SAASasp.netMVCWeb应用程序并为用户凭... 查看详情
使用移动应用在 Android 中集成 LinkedIn
】使用移动应用在Android中集成LinkedIn【英文标题】：LinkedInintegrationinAndroidUsingMobileApp【发布时间】：2014-05-2909:43:47【问题描述】：我正在我的Android应用程序中处理LinkedIn迎合，我已经使用简单的Webview完成了这项工作，每次都会... 查看详情
如何在我的应用程序中集成 ATOM 支付网关？
】如何在我的应用程序中集成ATOM支付网关？【英文标题】：HowdoIintegratetheATOMpaymentgatewayinmyapp?【发布时间】：2015-09-0508:13:12【问题描述】：我是Android新手。我想知道如何在我的应用程序中集成ATOM支付网关移动结帐页面？我想要... 查看详情
如何在 iOS 应用程序中集成 Recurly 网关 [关闭]
】如何在iOS应用程序中集成Recurly网关[关闭]【英文标题】：HowtointegrateRecurlygatewayiniOSapps[closed]【发布时间】：2015-07-2002:36:53【问题描述】：在我的应用程序中，我需要集成支付网关“Recurly”（recurly.com）。是否可以将其集成到ios... 查看详情
如何在 Web 应用程序中集成签名板
】如何在Web应用程序中集成签名板【英文标题】：HowtointegrateSignaturepadinawebapplication【发布时间】：2021-06-2906:38:32【问题描述】：我想在我的Web应用程序（.net或java）中集成签名板。我有一个表格，我的想法是捕获签名并在它被键... 查看详情
如何在 android studio 中集成应用订阅？
】如何在androidstudio中集成应用订阅？【英文标题】：Howtointegrateinappsubscriptioninandroidstudio?【发布时间】：2021-02-1223:37:11【问题描述】：我是应用内订阅的新手。我查看了Google的官方文档，但这并没有帮助。在我的应用程序中，我... 查看详情
在 ionic android 移动应用程序中集成 ccavenue 支付网关
】在ionicandroid移动应用程序中集成ccavenue支付网关【英文标题】：Integrationofccavenuepaymentgatewayinionicandroidmobileapp【发布时间】：2016-07-2005:13:21【问题描述】：我需要在ionicandroid应用中实现ccavenue支付网关的集成步骤。请帮帮我。【... 查看详情
如何在非 AndroidX 应用程序中集成任何 AndroidX SDK
】如何在非AndroidX应用程序中集成任何AndroidXSDK【英文标题】：HowtointegrateanyAndroidXSDKinNonAndroidXapp【发布时间】：2020-04-0409:44:24【问题描述】：我已将我的Android库项目(SDK)迁移到AndroidX，它正在使用implementation\'androidx.core:core:1.1.0\'... 查看详情
如何在 Android App 中集成 OpenCV Manager
】如何在AndroidApp中集成OpenCVManager【英文标题】：HowtointegrateOpenCVManagerinAndroidApp【发布时间】：2013-12-1402:08:04【问题描述】：我在我的Android应用程序中使用OpenCV2.4.7库。当应用程序启动时，它会转到名为OpenCVManager的应用程序的Goo... 查看详情
如何在 codeigniter 中集成 agora sdk
】如何在codeigniter中集成agorasdk【英文标题】：Howtointegrateagorasdkincodeigniter【发布时间】：2021-02-0210:47:36【问题描述】：我正在尝试使用agoraSDK(www.agora.io)将1:1视频通话添加到我的Web应用程序中。我为我的项目使用codeigniter。如何使... 查看详情
如何在 Rails 应用程序中集成 facebook 评论？
】如何在Rails应用程序中集成facebook评论？【英文标题】：HowtointegratefacebookcommentsinRailsapplication?【发布时间】：2012-08-1611:09:08【问题描述】：我已经使用Devise设置了一个Rails3.2应用程序。我想知道如何允许用户使用Facebook发表评论... 查看详情
如何在 android 中集成分叉的 Smack XMPP 存储库？
】如何在android中集成分叉的SmackXMPP存储库？【英文标题】：howtointegrateforkedSmackXMPPrepositoryinandroid?【发布时间】：2020-01-0310:08:09【问题描述】：我已将Smack库（xmpp客户端）集成到我的android项目中（使用https://github.com/igniterealtime/Sm... 查看详情