mobile-dev-environment

MobileDevEnvironment

Mobile Dev Environment (or MDE) is a simple set of tools injected into the DOM of minimalistic browsers lacking basic dev features. Developed during a period confined to a mobile device, the limitations of the platform became all to familiar and so to maintain a good balance of yang in the universe the library arose. So in that light, if you discover any bugs or have any feature ideas feel free to get in contact by submitting an issue on Github or sending an email to prjctnxt@gmail.com.

Features

Reload button
An easily accessible button that can be configured to refresh browser cache.
Log tray
A toggleable, resizable, colour coded output area bound to console.log().
Error messages
Catch and display errors that occur after the script has been initialised.
Trace information
View filenames and line numbers of all log messages.

Installation

If you are using npm, npm install mobile-dev-environment. Otherwise, grab the latest release or link via a CDN.

Include in the browser

// head
<link rel="stylesheet" type="text/css" href="path/to/mde.min.css">

// body
<script src="path/to/mde.min.js"></script>

or in Node

const MobileDevEnvironement = require('mobile-dev-environment');

Usage

let options =  {
  controlbarPosition  : 'tl',
  group               : 'myMultiPageApp',
  ...
};

new MobileDevEnvironment(options);

Configuration

Options
Option	Description	Type	Default
`modules`	An array of modules to load	`array`	`['reload','logtray']`
`controlBarOrder`	The module order in control bar	`array`	`['reload','logtray']`
`controlBarPosition`	The controlbar position, top left `'tl'` or right `'tr'`	`string`	`'tr'`
`displayErrors`	Catch and output javascript errors	`boolean`	`true`
`useConsoleLog`	Use console.log() or else log() to display messages	`boolean`	`true`
`hardReload`	Refresh browser cache	`string`	`true`
`group`	Share state information like open/close, height etc across instances of MDE on other pages	`string`	`'global'`
Modules
Module	Description
`reload`	An easily accessible button for reloading the page
`logtray`	A toggleable, color coded, resizable tray for displaying log messages

mobile-dev-environment