这是 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)

ITPub博客

如何在SAP UI5应用中集成第三方库:一个在移动设备上查看Web应用打印调试信息的小技巧

最新文章