这是 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-d…
感激浏览。
更多 Jerry 的原创文章，尽在：” 汪子熙 ”:
更多浏览
- 在没有任何前端开发教训的根底上, 创立第一个 SAP Fiori Elements 利用
- 答网友发问：应用 SAP Fiori Tools 创立的 Fiori Elements 利用，如何进行二次开发？
- 本地开发好的 SAP Fiori Elements 利用，如何部署到 ABAP 服务器上
- 深刻把握 SAP Fiori Elements 工作原理的前提条件：了解 Smart Field
- 深刻了解 SAP Fiori Elements 工作原理系列之二：如何给 SAP Fiori Elements 利用增加自定义按钮
- SAP Fiori Elements 框架里 Smart Table 控件的工作原理介绍
- SAP Fiori Elements List Report Smart Table 列我的项目宽度计算的奥秘
- 作为一名 ABAP 资深参谋，下一步能够抉择哪一门 SAP 技术作为主攻方向？
- SAP UI5 利用开发人员理解 UI5 框架代码的意义
- SAP UI5 module 懒加载机制
- SAP UI5 控件渲染机制
- HTML 原生事件 VS SAP UI5 Semantic 事件
- SAP UI5 控件元数据的元数据实现
- SAP UI5 控件的实例数据批改和读取逻辑
- SAP UI5 控件数据绑定的实现原理
- SAP UI5 控件数据绑定的三种模式：One Way, Two Way 和 OneTime 实现原理比拟
- 谈谈 SAP UI5 的视图控件 ID，以及其和 Angular 视图的异同
- 对 SAP UI5 无所不知的老手，从哪些资料开始学习比拟好？