@htmlacademy/in-browser-console.js

v1.1.5

Published

5 months ago

Inbrowser Demo Console

Downloads

0High
0Medium
0Low

console.js

Chrome-like in-browser console

Available methods:

log
info — same as log
dir
error
warn — same as error
logHTML — same as log, but strings won't be escaped

Usage

Manual setting

Connect script https://htmlacademy.github.io/console.js/latest/js/index.js, style file https://htmlacademy.github.io/console.js/latest/css/style.css on page, create new Console instance by passing output container and optional config

<head>
  <link rel="stylesheet" href="//htmlacademy.github.io/console.js/latest/css/style.css">
</head>
<body>
  <div class="console-container"></div>
  <script src="//htmlacademy.github.io/console.js/latest/js/index.js"></script>

  <script>
    const params = {
      expandDepth: 1,
      common: {
        excludeProperties: [`__proto__`],
        maxFieldsInHead: 5,
        minFieldsToAutoexpand: 5,
        maxFieldsToAutoexpand: 15
      }
    };
    var jsConsole = new Console(document.querySelector('.console-container'), params);

    jsConsole.log("Here is console.log!");

    // console.log = jsConsole.log.bind(jsConsole);
    // console.dir = jsConsole.dir.bind(jsConsole);
    // ...
    // console.log(123);
    // or use Console.prototype.extend()
    // jsConsole.extend(console);
    // console.log(123);
  </script>
</body>

Silent

Connect script https://htmlacademy.github.io/console.js/latest/js/index-silent.js on page

Script will automatically create console container and extend native browser window.console

<script src="//htmlacademy.github.io/console.js/latest/js/index-silent.js"></script>

<script>
 console.log(123);
</script>

Presets

Use predefined configurations by connecting scripts on page

Available presets

htmlacademy.github.io/console.js/latest/js/presets/htmlacademy.js — confifures behaviour, but not enabling autoexpand. All objects will show only up to 5 properties it preview (header). Configures autoexpand to be triggered only if there're from 5 to 15 properties. Excludes __proto__ property from autoexpand. Functions bodies will be collapsed.
htmlacademy.github.io/console.js/latest/js/presets/autoexpand-all.js — Enabling autoexpand of all objects by 1 level.

You can use both to enable autoexpanding with defined behaviour.

Connecting presets on page

<script src="//htmlacademy.github.io/console.js/latest/js/presets/preset-1.js"></script>
<script src="//htmlacademy.github.io/console.js/latest/js/presets/preset-2.js"></script>
<script src="//htmlacademy.github.io/console.js/latest/js/index-silent.js"></script>

Lower connected preset script has higher priority than others. Will be merged with lodash.mergeWith using concatinating arrays

Console constructor

const jsConsole = new Console(DOMElement, config);

Parameters

`DOMElement` — container to append console DOM element within.

`config` — object containing settings

You can specify 3 types of views here: object, function and array. And common, that has lower priority than concrete. Will be merged into concrete one with lodash.mergeWith using concatinating arrays

expandDepth — depth on which fields of this root object will be expanded. Default: 0.
maxFieldsInHead — max length of properties in preview (head). If has more, ... at the end will be showed. Default: 5.
minFieldsToAutoexpand — min length of fields in view type to auto expand. Default: 0.
maxFieldsToAutoexpand — max length respectively. Default: Positive infinity.
excludeViewTypesFromAutoexpand — array of view types that don't need to be expanded inside that root view type.
showGetters — specifies if get and set methods will be showed in expanded object body. Default: true.
showMethodBodyOnly — if function is a method of any type of object — shows only body of this function (in opened object).
excludePropertiesFromAutoexpand — properties in view type which wouldn't be auto expanded.
removeProperties — array of properties to remove from view.

Specific properties for array:

countEntriesWithoutKeys — useful only if maxFieldsInHead given. Specifies if indexed properties should be counted in preview (head). Default: false.

Specific properties for function:

nowrapOnLog — specifies if functions bodies will be collapsed. Default: false.

Example:

{
  object: {
    expandDepth: 2,
    minFieldsToAutoexpand: 1, // will expand if object has 1 or more enumerable fields
    excludeViewTypesFromAutoexpand: [`function`, `array`] // will not expanded inside object,
    showMethodBodyOnly: true // show method's body only (if object was opened)
  },
  function: {
    expandDepth: 1 // will expand only itself (in dir mode only),
    nowrapOnLog: true // On log will collapse function body
  },
  array: {
    expandDepth: 2, // expand 2 levels
    minFieldsToAutoexpand: 4, // if there is 4 enum fields in array
    excludeViewTypesFromAutoexpand: [`object`] // objects inside array won't be expanded
    countEntriesWithoutKeys: true
  },
  common: {
    expandDepth: 1,
    maxFieldsInHead: 6, // object and array will have up to 6 properties in their previews (headers)
    maxFieldsToAutoexpand: 10 // if there's more than 10 properties in obj of any type, it won't be expanded
  }
}

Config merge example

Common merge

This config:

{
  object: {
    maxFieldsToAutoexpand: 10,
    excludeViewTypesFromAutoexpand: [`object`]
  },
  common: {
    expandDepth: 1
    maxFieldsToAutoexpand: 15,
    excludeViewTypesFromAutoexpand: [`array`]
  }
};

will be transformed into this on application start:

{
  object: {
    maxFieldsToAutoexpand: 10,
    expandDepth: 1,
    excludeViewTypesFromAutoexpand: [`object`, `array`]
  }
}

Presets merge

Using lodash.mergeWith to merge objects and concat arrays inside them

You have 2 preset files:

<script src="//htmlacademy.github.io/console.js/latest/js/presets/preset-1.js"></script>
<script src="//htmlacademy.github.io/console.js/latest/js/presets/preset-2.js"></script>
<script src="//htmlacademy.github.io/console.js/latest/js/index-silent.js"></script>

preset-1.js contains:

{
  object: {
    maxFieldsToAutoexpand: 5,
    excludeViewTypesFromAutoexpand: [`object`]
  },
  common: {
    excludeViewTypesFromAutoexpand: [`function`]
  }
}

preset-2.js contains:

{
  object: {
    maxFieldsToAutoexpand: 10
  },
  common: {
    expandDepth: 1
    excludeViewTypesFromAutoexpand: [`array`]
  }
}

result will be:

{
  object: {
    maxFieldsToAutoexpand: 10,
    excludeViewTypesFromAutoexpand: [`object`]
  },
  common: {
    expandDepth: 1
    excludeViewTypesFromAutoexpand: [`array`, `function`]
  }
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme