domlogger

Simple visual web logging, based on the DOM.

1. Installation

~$ npm install -s domlogger

Then, in your browser, include the 2 files:

<script src="node_modules/domlogger/src/domlogger.js"></script>
<link rel="stylesheet" type="text/css" href="node_modules/domlogger/src/domlogger.css" />

Then, you are ready to use it.

2. Usage

The usage is very simple.

1. Create a new instance of the logger, and show it:

const logger = new DOMLogger().show();

2. Use any of the 3 default methods for logging, or register your own:

logger.log("This is a simple message");
logger.error("This is an error message");
logger.warn("This is a warning message");
logger.log({message: "Object are valid, even if they are circular"});
logger.error(window);
logger.warn(document.body);
////
logger.registerMessageType("ok", "okok", "okok", (i)=>i, "OKAY");
logger.ok("Yeah!");

3. Expand, compact or toggleCompact:

logger.expand();
logger.compact();
logger.toggleCompact();

4. Open, close or toggleOpen:

logger.open();
logger.close();
logger.toggleOpen();

5. Show, hide or toggleShow:

logger.show();
logger.hide();
logger.toggleShow();

6. Clear or destroy:

logger.clear();
logger.destroy();

3. API Reference

The API is focused, basically, in a class: DOMLogger.

The instances of DOMLogger are provided with some properties and methods.

This is the list of the current API:

DOMLogger(optionsParam={})
options;
domLogger.registerMessageType(methodName, classNameComponent="", classNameMessage="", modifierFunc=undefined, msgTypeAbbr=undefined);
domLogger.log(msg, isHTML=false);
domLogger.error(msg, isHTML=false);
domLogger.warn(msg, isHTML=false);
domLogger.expand();
domLogger.compact();
domLogger.toggleCompact();
domLogger.isCompact();
domLogger.open();
domLogger.close();
domLogger.toggleOpen();
domLogger.isOpened();
domLogger.show();
domLogger.hide();
domLogger.toggleShow();
domLogger.isShown();
domLogger.clear();
domLogger.destroy();

---

Here, you can find a deeper explanation:

---

DOMLogger(optionsParam={})

Type: {Class}

Return: {DOMLogger}

Parameter: {Object} optionsParam Object that defines the parameters of a DOMLogger instance.

Description: Generates the base object of the DOMLogger API.

---

options

Accessible: Extended by the DOMLogger(optionsParam={}) parameter.

Type: {Object}

DefaultValue:

{
 componentClass: ""
}

Description: Default option parameters for the current {DOMLogger} instance. It is used as the base value of the DOMLogger(optionsParam) parameter.

---

domLogger._

Type: {Object}

Description: This object holds some of the internals of the API, which will not be included in this documentation.

---

domLogger.registerMessageType(methodName, classNameComponent="", classNameMessage="", modifierFunc=undefined, msgTypeAbbr=undefined)

Type: {Function}

Parameter: {String} methodName. Name of the method that will log this type of message.

Parameter: {String} classNameComponent. Class applied to the {HTMLElement} of the logger component when a message is sent, that stays for less than 1 second. It is used to give some kind of visual effect for when that type of message is logged. Empty string by default.

Parameter: {String} classNameMessage. Class applied to the {HTMLElement} message sub-component (only the message element). Empty string by default.

Parameter: {Function|undefined} modifierFunc. Function that receives the generated {HTMLElement} message, and lets it modify it, to fully customize. Pass undefined for not doing anything in this step, or simply, do not provide it.

Parameter: {String} msgTypeAbbr. Name to be logged when a message of this type is clicked, by the browser console.

Returns: {DOMLogger} In order to keep it chainable, it returns the logger itself.

Description: Creates a new method for the current {DOMLogger} instance. It will be available as one more method, like domLogger.log(~), domLogger.error(~) or domLogger.warn(~). The customization is limited, but one can play with the CSS classes applied to the message component, or even modify the {HTMLElement} generated by the method.

Example:

var logger = new DOMLogger().show();
// This example uses jQuery:
$("<style>.okok{background:black;color:white}</style>").appendTo("head");
logger.registerMessageType("ok", "okok", "okok", undefined, "OKAY");
logger.ok("Yeah!"); // This should add a new message, with black background, and white letters.

---

domLogger.log(msg, isHTML=false)

Type: {Function}

Parameter: {String|Any} msg. Message to be logged.

Parameter: {Boolean} isHTML. Indicates if the message has to be taken as HTML (true) or as plain text. By default: false (plain text).

Returns: {DOMLogger}. In order to keep it chainable, it returns the logger itself.

Description: Logs a message in the default style. Green by default.

---

domLogger.error(msg, isHTML=false)

Type: {Function}

Parameter: {String|Any} msg. Message to be logged.

Parameter: {Boolean} isHTML. Indicates if the (string) messages have to be taken as HTML (true) or as plain text. By default: false (plain text).

Returns: {DOMLogger} In order to keep it chainable, it returns the logger itself.

Description: Logs as an error message in the default style. Red by default.

---

domLogger.warn(msg, isHTML=false)

Type: {Function}

Parameter: {String|Any} msg. Message to be logged.

Parameter: {Boolean} isHTML. Indicates if the message has to be taken as HTML (true) or as plain text. By default: false (plain text).

Returns: {DOMLogger} In order to keep it chainable, it returns the logger itself.

Description: Logs as a warning message in the default style. Orange by default.

---

domLogger.expand()

Type: {Function}

Returns: {DOMLogger} In order to keep it chainable, it returns the logger itself.

Description: Expands the console of the logger through all the window.

---

domLogger.compact()

Type: {Function}

Returns: {DOMLogger} In order to keep it chainable, it returns the logger itself.

Description: Compacts the console of the logger. Default position: bottom right.

---

domLogger.toggleCompact()

Type: {Function}

Returns: {DOMLogger} In order to keep it chainable, it returns the logger itself.

Description: Compacts or expands the console of the logger through all the window.

---

domLogger.isCompact()

Type: {Function}

Returns: {Boolean} True if it is compacted.

Description: Returns true if is is compacted.

---

domLogger.open()

Type: {Function}

Returns: {DOMLogger} In order to keep it chainable, it returns the logger itself.

Description: Opens the top buttons panel of the console of the logger.

---

domLogger.close()

Type: {Function}

Returns: {DOMLogger} In order to keep it chainable, it returns the logger itself.

Description: Leaves only the "Open" button visible, to open the top buttons panel the console of the logger.

---

domLogger.toggleOpen()

Type: {Function}

Returns: {DOMLogger} In order to keep it chainable, it returns the logger itself.

Description: Opens or closes the console of the logger.

---

domLogger.isOpened()

Type: {Function}

Returns: {Boolean} True if it is opened.

Description: Returns true if is is opened.

---

domLogger.show()

Type: {Function}

Returns: {DOMLogger} In order to keep it chainable, it returns the logger itself.

Description: Shows the console of the logger.

---

domLogger.hide()

Type: {Function}

Returns: {DOMLogger} In order to keep it chainable, it returns the logger itself.

Description: Hides the console of the logger.

---

domLogger.toggleShow()

Type: {Function}

Returns: {DOMLogger} In order to keep it chainable, it returns the logger itself.

Description: Shows or hides the console of the logger.

---

domLogger.isShown()

Type: {Function}

Returns: {Boolean} True if it is shown.

Description: Returns true if it is shown.

---

domLogger.clear()

Type: {Function}

Returns: {DOMLogger} In order to keep it chainable, it returns the logger itself.

Description: Clears the console of the logger.

---

domLogger.destroy()

Type: {Function}

Returns: {DOMLogger} In order to keep it chainable, it returns the logger itself.

Description: Destroys the console of the logger.

4. Conclusion

This library can be very interesting and handy for random projects.