This is Jerry’s 43rd article in 2021, and the 320th original article on Wang Zixi’s official account in total.

Web developers, whether using SAP UI5, Angular, React, or Vue, rely on Chrome/Firefox developer tools every day.

Back in 2018, Jerry wrote an article about Chrome Developer Tools: Jerry wants to talk to you about Chrome Developer Tools.

These developer tools are easy to use, but when a Web application is running on a mobile device, it can be a hassle to view the logs and debugging information printed using console.log directly from the mobile browser.

For example, Jerry wrote a previous article about how to debug a Web application running in Safari browser of iOS device directly on a Windows computer by remote connection:

Of course, if you just want to run a Web application on a mobile device, such as a mobile phone, and then want to see the printed debug information, you’re overkill.

VConsole is a tool library published by Tencent. The popularity of VConsole is evident from the more than 13,000 Stars it has received:

One use of vConsole is to download its library file locally and reference it in the script tag of a Web page. After you create a VConsole instance, you still print debugging information or logs as normal console.log.

A green VConsole button will appear in the bottom right corner of the rendered page:

Click on it to open a panel similar to Chrome Developer Tools, where you can see the debugging information printed by the application using console.log.

However, one of Jerry’s friends in the SAP technical communication group wanted to use VConsole in an SAP UI5 application, but found that it didn’t work.

This friend follows the VConsole tutorial directly and introduces VConsole with the script tag in the SAP UI5 application’s index.html.

This introduction of third-party library files can work with Angular, React, or Vue, but is not the recommended way to use third-party libraries in SAP UI5. Most standard SAP UI5 application usage scenarios are accessed through the Fiori Launchpad. In this case, the entry point to the SAP UI5 application is component.js, not index.html.

The right thing to do:

(1) In the SAP UI5 project, create a new lib folder and put the VConsole library file in it.

(2) In controller implementations that require VConsole functionality, declare the dependency path of VConsole using SAP.UI.DEFINE. As shown in label 2 below. This depend on the path is divided into two parts, the first half SAP/UI/demo/CombineLatest is to apply the SAP UI5 namespace sap.ui.demo.Com bineLatest in all. The second half is the relative path to the VConsole library file in the SAP UI5 application.

(3) ~ (4) : The VConsole dependency declared via sAP.UI.define is loaded and can be used normally in the JavaScript code of the SAP UI5 application controller.

Finally, to try the effect, access the SAP UI5 application on your mobile phone:

Click the VConsole button in the lower right corner. You see the expected Hello World printed by the code console.log:

In addition to the Log, the VConsole provides several other utility panels.

System panel: displays the URL of the currently accessed application, the client version, and the network type used:

The Element panel: You can view the native HTML code that the application renders on the phone. For example, if you access the SAP UI5 app on an Android phone, you can see the HTML source code contains the UI5 custom attribute data-sap-ui-os=”Android8.0.0″.

Of course, using third-party libraries in SAP UI5 applications is definitely not the only way to do it in this article.

Jerry once wrote an article before, if it is necessary to introduce a function of calling device camera to take pictures realized by a third-party library in SAP UI5, it can also be encapsulated as a Custom Control in SAP UI5. For implementation details, refer to my article: How to add the function of using camera to take photos in SAP UI5 application.

The source code of this article’s example:

https://github.com/wangzixi-d…

Thanks for reading.

More of Jerry’s original articles can be found on “Wang Zixi “:

Read more

  • Create your first SAP Fiori Elements application without any front-end development experience
  • Q: How do you redevelop the Fiori Elements application created using SAP Fiori Tools?
  • How to deploy a locally developed SAP Fiori Elements application to an ABAP server
  • A prerequisite for an in-depth understanding of the working principle of SAP Fiori Elements: an understanding of Smart Field
  • How to add a custom button to your SAP Fiori Elements application
  • Introduction to the working principle of Smart Table control in the framework of SAP Fiori Elements
  • SAP Fiori Elements List Report Smart Table column item width calculation
  • As an ABAP senior consultant, which SAP technology can I choose to focus on next?
  • SAP UI5 application developers understand what UI5 framework code means
  • SAP UI5 Module lazy loading mechanism
  • SAP UI5 control rendering mechanism
  • HTML native events vs. SAP UI5 Semantic events
  • Metadata implementation of SAP UI5 control metadata
  • Instance data modification and read logic for SAP UI5 controls
  • The implementation principle of SAP UI5 control data binding
  • Comparison of three modes of data binding for SAP UI5 controls: One Way, Two Way and OneTime
  • Talk about the SAP UI5 view control ID and its similarities and differences with Angular views
  • For beginners who know nothing about SAP UI5, what are the best materials to start with?