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.

We will divide the post among 3 Parts

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

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.

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

  

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.

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