1

Debugging offline HTML

From Resco's Wiki
Jump to navigation Jump to search
Resco JavaScript Bridge

When creating and testing custom HTML pages and scripts, it is often necessary to debug the JavaScript code to see what is actually happening. You can use alerts and logging as a substitute for this option, but in general, debugging gives you much quicker insight into the actual execution.

Depending on the platform you are working on, there are different ways how to enable debugging. This document describes the approaches for Windows, Android, and iOS.

Resco Mobile CRM JSDev edition

We offer a development/debugging version of Resco Mobile CRM app: https://github.com/Resconet/JSBridge/tree/master/MobileCRM

This version of the app opens a port for JavaScript debugger and allows the HTML root overriding.

Warning Don't use in production!

Windows Desktop/Store

Windows Desktop app uses two different browser controls for hosting iframes – Default Chromium browser and obsolete Internet Explorer which isn’t supported anymore and is available only for backward compatibility.

Debugging the Windows Desktop app using Chromium browser

  1. Use the JSDev edition of the Resco Mobile CRM app. MSI installation is available at JSBridge GitHub.
  2. In the app, navigate to the iframe that you want to debug.
  3. Open Google Chrome, MS Edge, or other Chromium-based browser on the same computer as app is running.
  4. Navigate to the following address:

Debugging the store app (Windows 10) with Edge WebView2

In v15.2, we introduced an alternative to the legacy WebView. Edge WebView2 browser can be activated in Woodford configuration.

Important Debugging WebView2 requires enabling the Developer Mode in Windows. See Microsoft documentation for details.

The easiest way how to debug Offline HTML hosted in WebView2 is using the JSDev edition of the Mobile CRM app. MSIXBundle installation is available at JSBridge GitHub. Debugging can be activated by classic right-click + Inspect or (e.g., in case of hidden iframe) it can be initiated directly from your JavaScript code by executing the command MobileCRM.bridge.command("openDevTools");

Both methods open a standalone window with Edge Inspector bound to inspected iframe. Warning: the debug window can appear behind the application window.

Second method

Alternatively, you can use remote debugging, which also supports production versions of the Resco mobile app. The full instructions are available in Microsoft documentation; an abbreviated version is provided below:

  1. Enable the Developer Mode.
  2. Enable the Device Portal and create a portal account.
  3. Add the following variable to environment: WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS --enable-features=msEdgeDevToolsWdpRemoteDebugging.
  4. In Microsoft Edge, go to the URL edge://inspect#devices.
  5. Connect to remote device http://localhost:50080 using your Device Portal credentials.
  6. Click Inspect in the list of your iframes.

Debugging the store app (Windows 10) legacy webview using Microsoft Edge DevTools Preview

Warning The legacy webview is being deprecated.
  1. Install and launch Microsoft Edge DevTools Preview (free app available from the Microsoft Store).
  2. Start Resco Mobile CRM and navigate to a form that uses iframes.
  3. In the DevTools, click the debug target that you want to debug.

Edge devtools debugging

Android

Android supports debugging of the web pages opened in third-party applications by using a remotely attached Chrome inspector.

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 debugging by default. It’s available at: https://github.com/Resconet/JSBridge/tree/master/MobileCRM

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

To learn more about Android remote debugging, take a look at the Google tutorial: https://developer.chrome.com/docs/devtools/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://github.com/Resconet/JSBridge/tree/master/MobileCRM

Installing JSDev app on iOS Simulator

iOS Simulator is a part of the Xcode installation. It can be started either from the Xcode menu: Xcode > Open Developer Tool > iOS Simulator or directly from the Xcode installation package (folder /Applications/Xcode/Contents/Developer/Applications/Simulator.app).

To install the JSDev app on iOS Simulator, simply unzip the package MobileCRM_JSDev_ios_simulator_XY.zip from GitHub Releases and drag MobileCrm.app into the Simulator window. Alternatively, you can install it with following command:

xcrun simctl install booted MobileCrm.app

Installing JSDev app on iPhone/iPad

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

  1. Create iOS Developer account at https://developer.apple.com
  2. Create a Wildcard App ID for bundle ID “*” (Identifiers / App IDs)
  3. Create an iOS app development provisioning profile for this AppID and download it (as Wildcard.mobileprovision file)
  4. Log in to your account from Xcode (Preferences / Accounts)
  5. Create an iOS Development signing identity (View Details button)
  6. Download iResign tool from https://www.resco.net/downloads/iReSign.app.zip
  7. Unzip it and run it
  8. Provide the path to IPA (from this folder), path to Wildcard.mobileprovision file and choose your development signing identity
  9. Specifying custom entitlement is not recommended. Leave that box empty. Entitlements are taken from your provisioning profile automatically.
  10. Changing the bundle ID is optional. Rather leave that box unchecked
  11. Resign the IPA and deploy it via iTunes or Xcode/Devices.
  12. 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”).

Debugging on iOS 1

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

Debugging on iOS 2

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.

Debugging on iOS 3

Click on it to connect WebInspector.

Debugging on iOS 4

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

Change local copy of offline HTML files

The typical development cycle for Offline HTML development is as follows:

  1. Change the local copy of the Offline HTML solution.
  2. Upload changed files to Woodford.
  3. Publish Woodford mobile project.
  4. Synchronize client app to get new customization.
  5. Verify the changes.

This can be frustrating and time-consuming. Fortunately, there are some shortcuts that can save a vital portion of the development/testing time.

One of the shortcuts is the 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/{AppID}/Documents

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

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

Visit the JSBridge GitHub page. It contains samples that implement deploying distribution folder directly to Windows Desktop/Store and currently booted iOS Simulator via a single npm script: https://github.com/Resconet/JSBridge/tree/master/samples/common-pitfalls

Override 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 a special URL that can change the root from which it takes the offline HTML files.

First, place your offline HTML solution on a local or remote HTTP server that's reachable from testing the device. It can be any type of server (for example, IIS or 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 an empty offline HTML solution here:

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

To make the IIS Express available from the local network, specify your IP address as the 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:

  1. Go back to your iOS/Android device or simulator.
  2. Open Mobile CRM JSDev edition app and minimize it – let it run on background.
  3. Open the web browser (Safari/Chrome) and type the following URL:
    mobilecrm:// htmlRoot?set=http://{IP Address}:{Port}

Your mobile app should be brought up from the background and display a message 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}

Override root (alternative method)

There's an alternative way of overriding the root directory of offline HTML files for the JSDev edition of the app. Go to the app installation folder and start the app with a special command line option: 

start MobileCrm.exe -htmlRoot {IP Address}:{Port} 
start MobileCrm.exe -htmlRoot http://localhost:{Port}

Command console

The following example allows you to type JSBridge commands directly into the app and execute them. This helps developers to be more productive. They can quickly explore and gain feedback on the proper usage of JSBridge API, do interactive testing, or verify complex behaviors.

Enter JS command into Resco Mobile CRM and execute them.

  1. Edit your development app project in Woodford.
  2. Go to the Offline HTML section and add a new file with the code below.
  3. Verify that the path to the file JSBridge.js is correct, then save all changes.
  4. Go to the Home section and Add IFrame, linking to the new file.
  5. Save all changes and publish the app project.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8" />
	<title>Empty Offline HTML page</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="initial-scale=1, user-scalable=no" />
	<script src="JSBridge.js"></script>
	<style>
	 #cmdLine::before {
		content: "> ";
	 }
	</style>
</head>
<body>
	<p id="outputP"></p>
	<div id="cmdLine" contenteditable="true" style="border-width:1px;"></div>
	<script>
		var $env = {};
		function $log(obj) {
			outputP.appendChild(document.createTextNode(JSON.stringify(obj)));
			outputP.appendChild(document.createElement("br"));
		}
		function $clear() {
			outputP.innerHTML = "";
		}
		cmdLine.addEventListener("keypress", async (event) => {
			if(event.charCode == 13 && !event.shiftKey){
				outputP.appendChild(document.createTextNode(cmdLine.textContent));
				outputP.appendChild(document.createElement("br"));
				let result = undefined;
				try {
					result = eval(cmdLine.textContent);
					if (result instanceof Promise){
						result = await result;
					}
					if (result instanceof Function){
						result = result.call();
					}
				} catch(err){
					result = "Error: " + err.message;
				}
				if (result !== undefined){
					outputP.appendChild(document.createTextNode(JSON.stringify(result)));
					outputP.appendChild(document.createElement("br"));
				}
				cmdLine.innerHTML = "";
				cmdLine.scrollIntoView();
				event.preventDefault();
			}
		});
		cmdLine.focus();
	</script>
</body>
</html>

Alternatively, you can add the iframe to a form. Here are some examples of commands you can use. 

// Keep target DetailView in $env.dv variable:
MobileCRM.UI.EntityForm.requestObject(e => $env.dv = e.getDetailView("General"))
// Test inserting items
$env.dv.insertItem(new MobileCRM.UI.DetailViewItems.TextBoxItem("name","label"))
// Try inserting more items at once:
$env.dv.insertItems([new MobileCRM.UI.DetailViewItems.TextBoxItem("name1","label1"), new MobileCRM.UI.DetailViewItems.TextBoxItem("name2","label2")],1)
// Try removing item:
$env.dv.removeItem(2)
// Try removing more items:
$env.dv.removeItem([1,2])
// Try startEdit (warning - pressing Enter placing the command causes that focus will move to next item - not a problem):
$env.dv.startEditItem(0)
// Update combo data source (on Appointment form):
$env.dv.updateComboItemDataSource(8,{Yes:0,No:1,Maybe:2}, "int", 1)

All information about the DetailView are available on our GitHub.





Was this information helpful? How can we improve?
Retrieved from "https://docs.resco.net/mediawiki/index.php?title=Debugging_offline_HTML&oldid=11817"