这是杰瑞2021年的第43篇文章，也是王子熙的第320篇原创文章公众号文章。做web开发的程序员，无论是使用SAPUI5，还是Angular、React、Vue，每天都离不开Chrome/Firefox开发者工具。2018年，Jerry写了一篇关于Chrome开发者工具的文章：Jerry和你聊聊Chrome开发者工具。这些开发者工具虽然简单易用，但是当web应用运行在移动设备上时，直接在移动浏览器上查看console.log打印的日志和调试信息是很麻烦的。比如Jerry之前写过一篇文章：在WindowsLaptops上调试运行在iOS设备上的前端应用程序，介绍了如何通过远程连接直接连接到Windows电脑上运行在iOS设备上的Web应用程序Safari浏览器。进行单步调试：当然，如果你只需要在手机等移动设备上运行一个web应用，然后想查看其打印出来的调试信息，使用上面的远程调试方式就有点大材小用了。vConsole是腾讯发布的工具库。这个库的受欢迎程度从它获得的13000多颗星就可以看出：vConsole的一个用法是将它的库文件下载到本地，在标签中引用的网页的脚本中。创建VConsole实例后，仍然使用普通的console.log打印调试信息或日志。此时渲染后的网页右下角会出现一个绿色的vConsole按钮：点击后可以打开类似Chrome开发者工具的面板，可以看到应用使用console打印的调试信息。日志。然而在Jerry的SAP技术交流群里，有朋友想在SAPUI5应用中使用vConsole，发现不行。这位朋友直接按照vConsole教程，通过SAPUI5应用的index.html中的script标签引入了vConsole。这种引入第三方库文件的方式在Angular、React或者Vue中都可以工作，但是SAP不推荐在SAPUI5中使用第三方库的方式。因为标准SAPUI5应用的大部分使用场景都是通过FioriLaunchpad作为入口来访问的。在这种情况下，SAPUI5应用程序的入口点是Component.js，而不是index.html。正确做法：(1)在SAPUI5项目中，新建一个lib文件夹，将vConsole库文件放入其中。(2)在需要使用vConsole功能的controller实现中，使用sap.ui.define声明VConsole的依赖路径。这显示在下面的图标编号2中。这个依赖路径分为两部分。sap/ui/demo/CombineLatest的前半部分是将.在SAPUI5应用的命名空间sap.ui.demo.CombineLatest中用/，后半部分是VConsole库文件RelativepathsinSAPUI5applications。(3)～(4)：加载sap.ui.define声明的vConsole依赖后，可以在SAPUI5应用控制器的JavaScript代码中正常使用。要最终试用它，请在您的手机上访问此SAPUI5应用程序：单击右下角的vConsole按钮。看到代码console.log打印出预期的HelloWorld：这个VConsole除了Log之外，还提供了一些其他有用的面板。系统面板：显示当前访问的应用程序的URL、客户端版本、使用的网络类型：元素面板：可以在手机端查看应用程序渲染的原生HTML代码。比如在Android手机上访问SAPUI5应用，可以看到HTML源码中包含data-sap-ui-os="Android8.0.0"的UI5自定义属性。当然，在SAPUI5应用中使用第三方库绝对不是本文提到的唯一方式。杰里以前写过一篇文章。如果需要在SAPUI5中引入第三方库来调用设备相机拍照，也可以将第三方库封装成一个SAPUI5自定义控件（CustomControl）。具体实现可以参考我的文章：如何在SAPUI5应用中添加使用相机拍照的功能。本文示例源码：https://github.com/wangzixi-d...感谢阅读。更多Jerry原创文章可见：《王子熙》：更多阅读创建第一个SAPFioriElements应用无需任何前端开发经验回答网友提问：使用SAPFioriTools创建的FioriElements应用，如何进行二次开发发展？如何将本地开发的SAPFioriElements应用部署到ABAP服务器深入理解SAPFioriElements工作原理的前提：理解SmartField深入理解SAPFioriElements工作原理系列之二：如何添加自定义SAPFioriElements应用按钮SAPFioriElements框架中SmartTable控件的工作原理介绍SAPFioriElementsListReportSmartTable中计算列项宽度的奥秘作为ABAP资深顾问，SAP技术可以你选择作为下一步的主要进攻方向？SAPUI5应用开发者理解UI5框架代码含义SAPUI5模块懒加载机制SAPUI5控件渲染机制HTML原生事件VSSAPUI5语义事件元数据SAPUI5控件元数据实现实例数据修改和读取逻辑SAPUI5控件的实现原理SAPUI5控件数据绑定SAPUI5控件数据绑定的三种模式：OneWay、TwoWay和OneTime实现原理比较说说SAPUI5的视图控件ID，以及它与Angular视图的异同。对于了解不多的初学者，从什么资料开始学习比较好？
