Mobile Dev Environment
MDE displays a console output tray and extendable action bar inside your browser window.
Table of Contents
- Table of Contents
- Features
- Install
- Node usage
- Browser usage
- Configuration
- Actions
- Packaged actions
- Custom actions
Features
- Actions bar: is a configurable menu containing quick access buttons (called actions).
- Bundled actions: include reloading / cache busting the page and toggling the console tray.
-
Console tray: catches and displays
console.log(),console.error(),console.assert()output. - Runtime errors: are caught and shown in the console tray.
Install
With node:
npm install @fa-repo/mobile-dev-environmentWith unpkg.com:
<script src="https://unpkg.com/@fa-repo/mobile-dev-environment@latest/dist/mde.min.js"></script>
<link href="https://unpkg.com/@fa-repo/mobile-dev-environment@latest/dist/mde.min.css" rel="stylesheet" type="text/css">Node usage
// app.js
import mobileDevEnvironment from '@fa-repo/mobile-dev-environment';
import '@fa-repo/mobile-dev-environment/mobile-dev-environment.css';
window.addEventListener("DOMContentLoaded", event => {
new mobileDevEnvironment({
root: document.getElementById('mde'),
stateId : 'my-multi-page-app',
actionsCorner : 'tl'
});
});
// app.html
<!-- ... -->
<html>
<head>
<link href="./link/to/app.min.css" rel="stylesheet" type="text/css" />
<script src="./link/to/app.min.js" defer></script>
</head>
<body>
<div id="mde"></div>
</body>
</html>Browser usage
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://unpkg.com/@fa-repo/mobile-dev-environment@latest/dist/mde.min.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/@fa-repo/mobile-dev-environment@latest/dist/mde.min.js" defer></script>
</head>
<body>
<div id="mde"></div>
<script>
new mobileDevEnvironment({
root: document.getElementById('mde'),
stateId : 'my-multi-page-app',
actionsCorner : 'tl'
});
</script>
</body>
</html>Configuration
| Option | Description | Type | Default | Required |
|---|---|---|---|---|
actions |
An array of actions to load | array |
['reload','tray'] |
|
actionsCorner |
The actions bar position, top left 'tl' or right 'tr'
|
string |
'tr' |
|
root |
Provide a DOM element for MDE to hook on too. | DOM element |
Required | |
stateId |
Share state information like open/close, height etc across instances of MDE on other pages | string |
'global' |
Actions
Actions are easily accessible buttons that appear in the actions bar. You can either use the buttons that come packaged with MDE or make your own.
Packaged actions
Packaged actions can be referenced in two ways. Either as strings by name or as objects which enable configuration.
// Example A
[ "reload", "toggle-tray" ]
// Example B
[ { action: "reload", refreshCache: false }, "toggle-tray" ]
// Example C
[ { action: "reload", refreshCache: false }, { action: "toggle-tray"} ]Packaged action - reload: this action reloads the page.
| Option | Description | Default | ||
|---|---|---|---|---|
refreshCache |
Refresh the browsers cache on each reload. | true |
||
Packaged action - toggle-tray: this action toggles the console tray.
Custom actions
Custom actions are a way to extend MDE with your own buttons. The API is quite flexible but at a minimum all custom actions require an action key with a value of "custom".
// Example
[
{ action: "custom", content: "Click me", onClick: e => alert("Hi!") }
]| Option | Description | type | ||
|---|---|---|---|---|
action |
Is the action type. If we're creating a custom action, this must be `"custom"`. | `string` | ||
content |
This goes inside the button. It could be some text or maybe another element like an icon. | `string|element` | ||
onClick |
This function is called when the button is clicked | `function` | ||