Using the Moodle App in a browser

Chromium or Google Chrome browser are the recommended tools for Moodle Mobile development. But remember that if you are going to use functions provided by Phonegap you should use the Android SDK o iOs developer tools.

Differences between Chromium and Google Chrome

Google Chrome is the Chromium open source project built, packaged, and distributed by Google. We can say that Chromium is Google Chrome without the "Google" add-ons

See https://code.google.com/p/chromium/wiki/ChromiumBrowserVsGoogleChrome for more information

We recommend to use Chromium instead Google Chrome

Advantages and disadvantages of using Chromium/Google Chrome

Main advantages

• Quick development
• DOM inspector
• Network monitor
• Database (local storage) inspector
• Emulation options

Disadvantages

• You can't test/develop using Phonegap APIs and Plugins
• If you use custom Phonegap code (including plugins) you will need to edit the mm.cordova.js for "emulate" that APIs in a browser
• You will need always to test in a real device and emulator prior to a production release
• You will need to verify that your CSS/layout works the same in an Android/iOs device

Installation

Install the “Chromium” browser just downloading from https://download-chromium.appspot.com/

In order to be able to access any domain via AJAX from the local file:/// protocol, you must run Chromium or Google Chrome in Unsafe mode adding this param:

--allow-file-access-from-files --disable-web-security

IMPORTANT: I strongly recommend you create a new link or application launch called "Chrome Unsafe" and use it only for testing the app. Better if you only use this browser for development

How to open the browser:

"Path to chrome\chrome.exe" --allow-file-access-from-files --disable-web-security

or in Mac (you can use Automator for creating an app bundle)

open -a "Google Chrome" --args --allow-file-access-from-files --disable-web-security

or for Chromium

open -a /Applications/Chromium.app --args --allow-file-access-from-files --disable-web-security

In Mac you can use Automator for creating a launching app

Browser Settings

With Chromium or Google Chrome and the F12 or "Developer tools" you can emulate mobile devices changing orientation, resolution, geo-location, touch events... It's not recommended to use de "Emulation Device" option because it just changes the user-agent and you could get some fails because of the jQuery Swipe. The best option to test with the browser is just rescaling the window to get a new viewport size.

Just open the Developers tools, click on the wheel bottom-right corner to see the Override options.

It's interesting also disabling the Cache (in general options)