Debugging an Offline HTML solution - Resco Mobile CRM
Debugging an Offline HTML solution

Windows Desktop/Store

Visual Studio supports script debugging in external applications. It can be attached to any application running the web browser with HTML (including the Mobile CRM for Window 7 desktop and for Windows Store).

Before trying this, you will have to enable the script debugging in Internet Explorer. To do so, open Internet Options/Advanced and uncheck the box “Disable script debugging”.

Debug_Resco_Offline_HTML_001

After that it will be possible to attach the running process “MobileCRM.exe” to the script debugger in Visual Studio. Uncheck all Code Types except the “Script”.

Debug_Resco_Offline_HTML_002

Visual Studio provides comfortable script debugging including the inline editing. To apply the changes, you will need to close the form which contains the web browser. The easiest way to do that is opening the “Setup” or “Sync” dialog.

Debug_Resco_Offline_HTML_003

It is also possible to debug the Windows Store version of the client application. The only limitation here is that the inline editing is not allowed.

Debug_Resco_Offline_HTML_004

Visual Studio Integration

To make the script debugging even easier, we provide the Visual Studio extension “Mobile CRM Integration” which incorporates the command “Run in Mobile CRM” into the Visual Studio Tools menu and provides the single click experience for connecting to running instance of Mobile CRM.

The idea is quite simple – you will create a project in Visual Studio and put all the HTML, JavaScript, CSS and other files that you typically have in the Offline HTML folder of Woodford’s Mobile Project into the project. When you execute the command “Run in Mobile CRM” it will locate the running instance of Windows 7 debug build of Mobile CRM app and replace all the files in the downloaded Offline HTML folder with the files from your project.

This makes the deployment of a new field available on one click in Visual Studio. Additionally, it offers automatic debugging support so when you put the breakpoints into your files, these will be hit since the command attaches also debugger to the app. This applies to TypeScript as well, so it is the easiest way to debug TypeScript (the breakpoints will be hit in the TypeScript code, not in the JavaScript code).

Generally, the process has following steps:

  1. You need to download & install development build of Windows 7 version of Resco Mobile CRM
  2. You need to download & install the Resco’s VS Integration package (Visual Studio needs to be installed first)
  3. You need to create a mobile project in Woodford and add the files into Offline HTML section. Note: These can be placeholder (empty) files for the moment – you just need them for the next step
  4. In the mobile project add Iframes with HTML files from Offline HTML section to the forms / views / etc. where you want to use them.

Note: this is the only way to attach an HTML file to an Iframe, so this is where you define which file will be used where

  1. Create a Visual Studio solution / project and put the Offline HTML files into the project
  2. Synchronize the development build of Windows 7 app with the server / mobile project to get the Iframes into the app
  3. Use Run in Mobile CRM command to copy the version of the files from your Visual Studio project into the app’s local folder for comfortable development

This way you can quickly develop and debug the JavaScript code – just don’t forget that once you are done you need to upload the files from your project back to Mobile Project’s Offline HTML section, since the files were overwriting only the local copy of the Offline HTML, not the server version.

VS Integration offers the functionality of overriding the Offline HTML root to your solution folder. See the section “Overriding Offline HTML root” for further details.

Debug_Resco_Offline_HTML_005

Android

Android supports debugging of the web pages opened in third-party applications by using remotely attached Chrome inspector. It has been supported since Android 4.4 (KitKat).

Mobile CRM application doesn’t support debugging by default for security reasons. However, it’s possible to switch it on by calling the method “enableDebug” from your Offline HTML solution. See following link for details:

https://www.resco.net/javascript-bridge-reference/#MobileCRM_Bridge_enableDebug

Developers can use the JSDev edition of the Mobile CRM app which supports the debugging by default. It’s available at:

https://www.resco.net/downloads/DebugBuilds.zip

In addition to enabled debugger, this edition supports the Offline HTML overriding (see below).

To learn more about the Android remote debugging, take a look at Google tutorial:

https://developers.google.com/chrome-developer-tools/docs/remote-debugging

 

iOS

iOS also supports debugging of the web pages opened in third-party applications. However, apps from the AppStore (or even from the TestFlight) live in the sandbox which prevents development tools connecting to them. That’s why we started to provide the special installation that can be used for development purpose. It’s available at

https://www.resco.net/downloads/DebugBuilds.zip

 

Installing Debug Build on iOS Simulator

To install the debug build on iOS Simulator follow these steps:

  • Open Xcode menu: Xcode / Open Developer Tool / iOS Simulator
  • Open Terminal, go to DebugBuilds/iPhoneSimulator directory and type following command:

xcrun simctl install booted MobileCrm.app

 

Installing Debug Build on iPhone/iPad

To install the debug (JSDev) build follow these steps:

  • Create iOS Developer account at https://developer.apple.com
  • Create a Wildcard App ID for bundle ID “*” (Identifiers / App IDs)
  • Create an iOS app development provisioning profile for this AppID and download it (as Wildcard.mobileprovision file)
  • Log in to your account from Xcode (Preferences / Accounts)
  • Create an iOS Development signing identity (View Details button)
  • Download iResign tool from https://www.resco.net/downloads/iReSign.app.zip
  • Unzip it and run it
  • Provide the path to IPA (from this folder), path to Wildcard.mobileprovision file and choose your development signing identity
  • Specifying custom entitlement is not recommended. Leave that box empty. Entitlements are taken from your provisioning profile automatically.
  • Changing the bundle ID is optional. Rather leave that box unchecked
  • Resign the IPA and deploy it via iTunes or Xcode/Devices.
  • If it didn’t work, make sure that device was included in your provisioning profile.

Preparing the Debugging Environment

Debugging on iOS (both device and Simulator) is performed by using Safari WebInspector on the Mac. We recommend using the latest version of Safari or at least the version corresponding to Safari version on your device.

To enable remote debugging you will need to enable the WebInspector in Safari settings (option “Advanced”).

Debug_Resco_Offline_HTML_006

Then enable the “Develop” menu in Safari preferences (tab Advanced) on Mac.

Debug_Resco_Offline_HTML_007

Now you can connect your iPad via USB, open the client application and navigate to the form showing your offline HTML. After that you should observe the submenu “iPad” under Safari Develop menu showing the client application and HTML file opened on its form.

Debug_Resco_Offline_HTML_008

Click on it to connect WebInspector.

Debug_Resco_Offline_HTML_009

HINT: If Safari is still missing the iPad option, try to quit it and restart once more.

 

Changing the local copy of the Offline HTML files

Typical development cycle for Offline HTML development is as following:

  • Changing the local copy of the Offline HTML solution
  • Uploading changed files to Woodford
  • Publishing Woodford mobile project
  • Synchronizing client app to get new customization
  • Verifying the changes

We consider this to be very frustrating and time consuming, but fortunately, there are some shortcuts that can save a vital portion of the development/testing time.

One of the shortcuts is a possibility of changing the local copy of the Offline HTML files, which is possible on iOS Simulator and Windows platforms. Offline HTML reside in the WWW subfolder of the app data.

In case of Windows 7 Desktop application, the application data are stored in the following folder: %APPDATA%\MobileCRM

which is typically: C:\Users\{UserName}\AppData\Roaming\MobileCRM

In case of Windows Store (Win10), it’s %LOCALAPPDATA%\Packages\Resco.MobileCRM_{StoreId}\LocalState\MobileCRM

which is typically: C:\Users\{UserName}\AppData\Local\Packages\ Resco.MobileCRM_{StoreId}\LocalState\MobileCRM

In case of iOS Simulator, app files are also applied to the file system at: ~/Library/Developer/CoreSimulator/Devices/{SimulatorID}/data/Containers/Data/Application

To find the right application within this folder, try to search for specific file (like JSBridge.js) inside this root.

To find the SimulatorId of currently booted simulator, open the Terminal app and insert the following command: xcrun simctl list | grep Booted

 

Overriding the Offline HTML root

Another shortcut that can save a lot of development time is overriding the Offline HTML root. Once you installed the JSDev edition of our app from Debug Builds (see above), the app handles special URL that can change the root from which it takes the Offline HTML files.

First, place your Offline HTML solution into a local or remote HTTP server that’s reachable from testing device. It can be any type of the server (IIS, Apache,…), but we recommend using Visual Studio Typescript project which automatically starts the IIS Express instance with your Offline HTML files. We provide a template for empty Offline HTML solution here:

https://www.resco.net/downloads/OfflineHtml.zip

HINT: To make the IIS Express available from LAN, specify your IP address as a target URL instead of “localhost” and use the following command to reveal the URL:

netsh http add urlacl url=http://10.211.55.5:4199/ user=everyone

When a local copy of Offline HTML solution is available via HTTP, follow these steps to override the root:

    • Go back to your iOS/Android device or simulator
    • Open Mobile CRM JSDev edition app and minimize it – let it run on background
    • Open the web browser (Safari/Chrome) and type the following URL:

mobilecrm:// htmlRoot?set=http://{IP Address}:{Port}

  • Mobile CRM app should be brought up from background and it should display a toast message, notifying that the Offline HTML root was changed
  • From this moment, the app should take all Offline HTML files from your HTTP server instead of local app storage

If you prefer command line tools instead of typing the URL to browser, use the following ADB command for Android:

adb shell am start -a android.intent.action.VIEW -d mobilecrm://htmlRoot?set=http://{IP Address}:{Port}

or this one for iOS Simulator:

xcrun simctl openurl booted mobilecrm://htmlRoot?set=http://{IP Address}:{Port}