mobile-console-lite

A console emulator for debugging on mobile and tablet

Usage no npm install needed!

<script type="module">
  import mobileConsoleLite from 'https://cdn.skypack.dev/mobile-console-lite';
</script>

README

MobileConsoleLite

CircleCI Status npm npm npm

Console emulator help you for debugging on mobile and tablet device. MobileConsoleLite create a DOM console catching the console.log and window error.


Installation

$ npm install mobile-console-lite
//or
$ yarn add mobile-console-lite

Importing

We recommand calling the script at the very top of the <head> of your page to be sure catching every error/log. 

import MCL from "mobile-console-lite"
new MCL()
CDN
<script type="text/javascript" src="path/to/dist/mcl.js"></script>
<script type="text/javascript">
    new MCL()
</script>
Quick use
import MCL from "mobile-console-lite"
new MCL()

Will create the console at the end of body tag.

You also can specify the console container by passing a node selector in the first argument. example :

new MCL(document.querySelector("#app"))

customising

you can pass an options object for customising the console

import MCL from "mobile-console-lite"
const options = {
    //some options
}
new MCL(document.querySelector("#app"), options)

options


You can set conditions for launching the console.

hash will start the console if the hash #name is present in url

new MCL(document.querySelector("#app"), {
    initOn: {
        hash: "name"
    }
})
//will start on https://www.example.com/#name


query will start the console if the hash #name is present in url

new MCL(document.querySelector("#app"), {
    initOn: {
        query: "name"
    }
})
//will start on https://www.example.com/?name=value



You also can set the default display of console

minimize : boolean default : false

new MCL(document.querySelector("#app"), {
    display: {
        minimize: true
    }
})

by default the console will be minimize



popup : boolean default : false

new MCL(document.querySelector("#app"), {
    display: {
        popup: true
    }
})

by default the console will be popuped

TODO

  • eval des commandes
  • toggle de la console window
  • resize de la console window
  • drag de la console window
  • init class on hash or query param
  • add style param for customising console
  • customising console catcher (log/error/warn)
  • catching console.warn
  • catching console.time
  • catching console.table
  • css bundles into one single file
  • or test css in js
  • doc
  • TU
  • TS