hkirat / notification-logger Goto Github PK

View Code? Open in Web Editor NEW

1.0K 21.0 55.0 84 KB

Desktop notification for your console Logs

Home Page: http://hkirat.github.io/notification-logger

HTML 30.62% JavaScript 69.38%

notification-logger's Introduction

Notification Logger

Ever wondered why you have to open the console every time you want to want to log a variable?

Notification Logger helps provide desktop notification for your console messages.

During development, You have to check the browser's inspector periodically to see what your console.log()'s are saying.

With notification-logger, you can develop and debug web apps and see console messages as Desktop Notifications.

And it only adds ~50 lines to your project.

Demo

Initial repo forked from chinchang's project screenlog.js. Check out his awesomeness over here

Screenshot

Installing

Use npm or git clone to download the module.
- npm install notification-logger
- git clone https://github.com/hkirat/notification-logger.git
include notification-logger.js or notification-logger.min.js
Initialise with logger.init()

Methods

logger.init - Initialises the logger
logger.log - Logs the message via a Desktop Notification only
console.log - Logs the message via a Desktop Notification and in the browser console
logger.destroy - Reverts console.log to original functionality

Browser Support

Works best on latest versions of Google Chrome, Firefox and Safari.

To Do

Add Custom Icon to Notifications
Unwrap Objects while Logging them as Desktop Notification

Credits

Icons Made by http://www.flaticon.com/authors/roundicons.

notification-logger's People

Contributors

Stargazers

Watchers

notification-logger's Issues

Unwrap Objects while Logging them as Desktop Notifications

Hey,

Great idea on the script! As far as unwrapping objects would you just use JSON.stringify?

No icon on the demo website

Running on Linux Mint 18 with Google Chrome (53.0.2785.143)

example.html does not work on Ubuntu 16.04 Chrome version 53.0.2785.92 (64-bit)

The notification permission request pop up does not appear on chrome.

Console contains

"title"                           notification-logger.js:23 2 
"title"                           example.html:32 2

The notification-logger demo works fine.

At least give due credit to the library you using in your readme & website

This is based on https://github.com/chinchang/screenlog.js

& website design is copied from https://kushagragour.in/lab/hint/

Support Chrome for Android

I’ve tested your demo in browsers on Android; it works in Firefox, but not in Chrome. Could you confirm?

Support Various notification options

The notification web API supports multiple options - https://developer.mozilla.org/en-US/docs/Web/API/Notification/Notification

These options could be used to customise the notifications.

Remove duplication of code...

You talk about it only being ~100 lines of code, but you duplicated the code for one of the main functions, which just increases the number of lines quite a bit...

You can probably remove all that by re-using the same function... talking about this one (and what is in genericLogger())...

function log(body, title) {
        title = title || "Notification";
        if (!("Notification" in window)) {
            alert("This browser does not support desktop notification");
        } else if (Notification.permission === "granted") {
            new Notification(title ,{body: body});
        } else if (Notification.permission !== 'denied') {
            Notification.requestPermission(function (permission) {
                if (permission === "granted") {
                    new Notification(title ,{body: body});
                }
        });
      }
    }

Bookmarklet

Using the following javascript one may include and init the notification logger at any page without having to put dev-only dependencies or script tags into the code:

if (typeof window.logger === 'undefined') {
    var script = document.createElement('script');
    script.src = 'http://singhharkirat.com/notification-logger/notification-logger.js'; 
    document.body.appendChild(script);
}
window.logger.init();

Putting that as a bookmarklet link and you've got a quick way to activate notification-logger on any page:

<a href="javascript:if(typeof window.logger=='undefined'){var script=document.createElement('script');script.src='http://singhharkirat.com/notification-logger/notification-logger.js';document.body.appendChild(script);}window.logger.init();">Bookmarklet</a>

Maybe you want to add that to the description page.