Debug Android App in Chrome Dev tool – Microsoft dynamics 365 finance and Operation mobile App Debugging

Microsoft Dynamics 365 — Sat, 20 Jun 2020 19:49:17 +0000

Recently I was added to an internal project call by my Friend and Collage who thinks I am an expert in UI and JS development I don’t know why but as I am good at troubleshooting so I continued.

So the Agenda was, Dev team was working on Microsoft dynamics 365 Finance and Operations Mobile application and they went able to figure out how to change the JS and CSS of the Application.

Dev team provided some documents and credentials and I started doing my R&D to at least reach the Debugging part and then JS and CSS would be easy and browsing through the document itself gave information about Debugging but that was not step by step process so thought of Writing it and share the same.

https://www.youtube.com/watch?v=DU7qRgY7ghs

Debugging Microsoft dynamics 365 Finance and Operations Android app on Chrome Browser dev tool (NOOD JS)

We will divide the post among 3 Parts

Install android-debug.apk app on android (Provided by Microsoft and can be downloaded from Github)
Enabling USB Debugging and Developer mode in Android Device
Connecting to Remote devices (Microsoft dynamics Android app) from Google Chrome Browser which is now available under chrome://inspect/#devices
Adding BreakPoint in JS and even change try CSS change from Element

STEP 1: Install android-debug.apk on android Device

Below is the official Developer Sample from Microsoft: https://github.com/Microsoft/Dynamics365-for-Operations-mobile-FleetManagementSamples

Navigate to the page and download android-debug.apk

Now copy the APK to your Android Device and install, Remember to check install from unknown just temporary
Settings => Apps and Notification -> Apps Permission -> Spacial app Access

And our app is installed successfully ( Remember debuting will not work on app downloaded from google app) as both functions and looks the same.

STEP 2: Enabling USB Debugging and Developer mode in Android Device

We will enable Developer Mode and USB Debugging from Setting

Navigate to Settings -> About Phone -> and tap on Build Number 5 times to enable the developer mode option
Now search “Developer option in setting” or Navigate to Settings -> System -> Developer Options and Enable Developer Option and USB debugging options

STEP 3: Connecting to Remote devices (Microsoft dynamics Android app) from Google Chrome Browser which is now available under chrome://inspect/#devices

Now we are all ready to connect USB debugging from Chrome browser

Connect Android Device with PC and Open Chrome Browser, Go to Inspect element / Dev tool -> More Tool and remote Device.There we will see an Option saying it has been deprecated and there is a new way to do it

So it has been moved to chrome://inspect/#devices , Open the App in android device which is connected to pc with USB and Copy the same in the Address bar and we will find an app for inspect.

STEP 4: Adding BreakPoint in JS ExpenseMobile.js and even change try CSS change from Element

Clicking on Inspect will bring up screen preview of the android app and all dev tool option will be available for use

Let us know Put breakpoint to ExpenseMobile.js (We need to once access expense management to see the js in resource).

We can also try CSS change from Element

The post Debug Android App in Chrome Dev tool – Microsoft dynamics 365 finance and Operation mobile App Debugging appeared first on Microsoft Dynamics 365 Blog.

Fin&Ops Mobile App Archives - Microsoft Dynamics 365 Blog

Debug Android App in Chrome Dev tool – Microsoft dynamics 365 finance and Operation mobile App Debugging