Skip to Content

How to debug UI5 application packaged into a mobile device via Cordova with a custom plugin

Suppose you have packaged a UI5 application into a mobile device via Cordova, and in your UI5 application you have consumed some Cordova plugin which provides native API in mobile platform, and you would like to debug your application. In this blog, I will show steps how to debug UI5 JavaScript code and Cordova plugin code in Android platform.

I will continue to use the UI5 application Step by step to create a custom Cordova plugin for Android and consume it in your UI5 application described in my previous blog for demo.

How to debug UI5 code running in Android device

Suppose you would like to debug whether your UI5 code runs correctly in a real Android device. The steps to debug in Chrome is almost the same as when you debug the UI5 application running in PC, only a few additional steps are necessary.
1. Enable USB debug option for your Android device. And then connect your mobile device with your PC, open Chrome development tool:
Now your should see your Android device here:
2. Launch the UI5 application in your mobile device, then you should find a new entry appears under your device name. Click button “Inspect”:
3. Now switch to Sources tab, and all loaded html and JavaScript resources are visible. There is nothing new starting from here: you could just set breakpoint in whatever positions. For example, in the screenshot below I set a breakpoint in line 38, where the plugin written in Java is to be called.
4. Re-launch the application, and now breakpoint is triggered.
Press F11, and we can still step into and check how Cordova plugin written by Java is called:
The magic of call from JavaScript to Java starts in line 967. For more detail see this blog How is JavaScript code in OData offline plugin delegated to native Java code in Android.

How to debug Cordova plugin developed in Java

I am using Android development studio to debug the Java code.
Suppose the root folder of my project is JerryUI5HelloWorld, just open the folder android under platforms folder, as highlighted below.
Once the project is opened via Android studio, it looks like as below:
Launch the application under debug mode:
Repeat the operation in UI, and the breakpoint set previously is triggered now.
You can still switch between different callstack frame to observe how the custom plugin is called by Cordova framework in Java side.
13 Comments
You must be Logged on to comment or reply to a post.
  • https://swedish24.co.kr/

     

    스웨디시마사지란무엇인가요?

    스웨디시는스웨덴에서건너온마사지입니다.유럽에선이미엄청유명한마사지죠.
    한마디로스웨디시자체를사전어로풀이하면, ”스웨덴스타일“ 또는 ”스웨덴어”입니다.
    허나우리나라에선스웨디시란단어자체가일종의마사지행위의명칭이된신종마사지로
    탄생했습니다.

    정확하게말을하면스웨디시마사지또는스웨덴식마사지가올바른표현입니다^^
    스웨디시에대해사전적인이야기를써넣었습니다.
    사전적의미말고정말로스웨디시마사지는각국가별로어떻게관리를하고있을까요?
    각국가별차이는있는지알아봐요.

    한국에서는스웨디시마사지하면타이마사지나아로마마사지경락마사지와는다르게
    압이적고부드럽고릴렉싱한마사지로통합니다.한국에서스웨디시는보통타국가의관리사가관리를해주는것이아니라한국인관리사들이관리를해줍니다.
    보통부드러운관리다보니, 연령이높은관리사가관리할경우손이거칠염려때문에
    비교적연령이낮은관리사가관리를해줍니다.

    스웨디시마사지는각종아로마오일을이용하여바디에오일링을하고근육결을따라미끄럽게또깊숙하게근육에자극을주어혈액순환을촉진시켜근육을풀어줍니다.
    서양을대표하는수기요법이라하며서양인들은이마사지를가장이상적이고과학적인
    마사지라고평가하고있다고합니다.또한귀족느낌의마사지라고하기도하는데
    고대에왕들이나왕족귀족들이즐겨받던마사지의기법이며, 기법자체가품위있고
    바른매너의품격으로마사지에임합니다.

    스웨디시의궁극적인마사지목표는혈액순환이라고볼수있습니다.
    림프자극, 피부자극, 근막자극등을통해혈액순환을시켜피로를회복하고
    몸의에너지를충전하는것이것이스웨디시마사지의기초이고근간입니다.

    스웨디시마사지의특징은

    스웨디시마사지는이성간의마사지가음양의조화를이루어더욱좋다고판단하며,
    전신을오일로관리하기때문에전신을풀오일링하고밀착하여관리한다.
    때문에불가피하게일회용속옷만착용하고옷을모두탈의합니다.
    이때마사지를받는사람이수치심을느끼지않도록시술할부위만노출후
    나머지는모두가리고관리해줍니다.
    수면을유도하는관리이기도해서말을많이시키지않기도합니다.
    허나, 관리사의성향에따라다르기때문에말을많이거는관리사도많이있습니다.
    절제와, 클래식, 고급스러움, 매혹적인관리가바로스웨디시마사지라고보시면됩니다.

    스웨디시마사지는 1인샵에서도관리를많이하고로드샵에서도관리많이합니다.
    한국에서는예전건마가유행을많이했는데지금은
    5대마사지로나뉘어진거같습니다.

    스웨디시마사지, 로미로미마사지, 아로마마사지, 경락마사지, 타이마사지
    예전에건마가많이나뉜거같습니다.

    스웨디시마사지는남녀노소누구든한번받으면절대잊지못할엄청난마사지입니다.
    릴렉스하고부드러운관리에부드러운웜오일거기에잔잔한음악까지
    관리를받고나면무조건꿀잠이가능한최고의관리가바로 “스웨디시마사지입니다.”