srbjslogger

1.5.1 • Public • Published

SRBJSLogger



Motivation

A while ago I came across this very interesting blog.

I immediately noticed that the content of the Browser Developer Console certainly does not correspond to what I was previously familiar with

Of course, I was intrigued and wanted to try and spice up the content of the browser console a bit myself.

Of course with the ulterior motive that I wanted to better separate the log outputs of our UI5 applications from standard log outputs anyway. It should also be easier for our customers to distinguish really important logs from "standard warnings" etc.

Said and done. The result of my considerations is the following library.

Features:
A number of JS methods that allow us to create very prominent log outputs.
With the creation of the library, I also implemented a requirement that was long overdue. With the command SRBJSLogger.developer(true, {obi: "wan kenobi"}); very important details for us are displayed in the browser log. Among other things, "which browser is used", "screen size" etc. A very nice feature is setting the first parameter to true. If this parameter is activated, the browser console provides a QR code with the content of the most important application information. ( Additional data can also be packed into the QR code - see "Obi Wan Kenobi" )

Getting started

Initialize the SRBJSLogger via the NPM CDN:

For initializing the Logger via CDN, simply copy and paste the following in the index file of the HTML5 app:

<script src="https://npmcdn.com/srbjslogger/SRBJSLogger.min.js"></script>

Initialize the SRBJSLogger via downloading the latest version:

Download the latest minified version from here. Place that file into a directory of the app's folder structure, where it can access that file. For UI5 apps, using the index.html bootrapping, instantiate the Logger like above via

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

For UI5 apps, not using the index.html startup logic, paste the following in the ressources section of the manifest file:

"resources": { "js": [ { "uri": "path/to/SRBJSLogger.min.js" } ] }

Initialize the Logger temporarily via the browsers console. Just copy, paste and execute the following snippet in the browsers console:

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://npmcdn.com/srbjslogger/SRBJSLogger.min.js';
script.addEventListener("load", function() { SRBJSLogger.getVersionInfo(); });
    
document.head.appendChild(script);

\

Documentation

The init function

SRBJSLogger.init("SCOPE","TOPIC",{verbose: true})

Execute Open the console to see the result

Parameters

init(scope[String], topic[String], opt[{}])

  • scope

    Sets the scope of all log messages

  • topic

    Sets the topic of all log messages

  • opt

    • This variable has to contain an object or undefined. Setting the object property verbose to true, logs a badge, after the init function is processed.

The log function

SRBJSLogger.log("Title", "My message", { scope: "testscope", topic: "testtopic" })

Execute Open the console to see the result

Parameters

init(title[String], message[String], opt[{}])

  • title

    Sets the title ( left ) of the badge

  • message

    Sets the message ( left ) of the badge

  • opt

    • This variable has to contain an object or undefined. Setting the propeties scope and/or topic, of this object, overwirtes state and topic, if they were set via the init method



Results in


The error function

SRBJSLogger.error("Title", "My message", { scope: "testscope", topic: "testtopic" })

Execute Open the console to see the result

Parameters

init(title[String], message[String], opt[{}])

  • title

    Sets the title ( left ) of the badge

  • message

    Sets the message ( left ) of the badge

  • opt

    • This variable has to contain an object or undefined. Setting the propeties scope and/or topic, of this object, overwirtes state and topic, if they were set via the init method



Results in


The warn function

SRBJSLogger.warn("Title", "My message", { scope: "testscope", topic: "testtopic" })

Execute Open the console to see the result

Parameters

init(title[String], message[String], opt[{}])

  • title

    Sets the title ( left ) of the badge

  • message

    Sets the message ( left ) of the badge

  • opt

    • This variable has to contain an object or undefined. Setting the propeties scope and/or topic, of this object, overwirtes state and topic, if they were set via the init method



Results in


The getVersionInfo function

SRBJSLogger.getVersionInfo()

Execute Open the console to see the result

Results in


The developer function

SRBJSLogger.developer(true, {obi: "wan kenobi"});

Execute Open the console to see the result

Parameters

developer(showQrCode[true|false], customObject[{}])

  • showQrCode

    Displays a QRCode in the console if a value is provided resulting in true

  • customObject

    Supply a object here. The object is appended in the logoutput and also in the QRCode data like in the example below



Results in


Package Sidebar

Install

npm i srbjslogger

Weekly Downloads

25

Version

1.5.1

License

MIT

Unpacked Size

3.32 MB

Total Files

45

Last publish

Collaborators

  • michaelhenningersrb