├── README.md ├── collapsed.png ├── expanded.png ├── jsbug.js ├── package.json └── samplecode.png /README.md: -------------------------------------------------------------------------------- 1 | # Simple, colorful javascript debugging on demand 2 | 3 | ##### Append ?jsbug=true to url in order to enable logging through jsbug within your browser console. And simply add ?jsbug=false to disable it. Jsbug is enabled/disabled through localstorage and will not perform anything if not enabled. It´s incredibly lightweight and do not require any dependencies. 4 | 5 | ## 👉 [Try it](https://b44rd.github.io/jsbug.html) 👈 6 | 7 | ### Install jsbug 8 | ``` 9 | npm install --save jsbug 10 | ``` 11 | 12 | ### Make it a part of the project 13 | ```javascript 14 | // Require it 15 | var debug = require("jsbug"); 16 | 17 | // Or import it 18 | import debug from 'jsbug' 19 | ``` 20 | 21 | ### Usage 22 | 23 | ##### Basic debugging 24 | ```javascript 25 | // Print "♢ Clicked a button" using blue color 26 | debug("Clicked a button"); 27 | ``` 28 | 29 | ##### Changing the color output 30 | ```javascript 31 | // Print "♢ Clicked another button" using a purple color 32 | debug("Clicked another button", { color: '#6A36CB' }); 33 | ``` 34 | 35 | ##### Indicate ajax calls (start msg with a pipe) 36 | ```javascript 37 | // Print "| Requesting api" using yellow color 38 | debug("| Requesting API"); 39 | ``` 40 | 41 | ##### Indicate success 42 | ```javascript 43 | // Print "* JSON returned" using green color 44 | debug("JSON returned", { success: true }); 45 | ``` 46 | 47 | ##### Indicate failure 48 | ```javascript 49 | // Print "@ Failure! Unexpected result" using red color 50 | debug("Unexpected result", { success: false }); 51 | ``` 52 | 53 | ##### Indicate failure with grouped, inspectable properties 54 | ```javascript 55 | // Print "@ Failure: Unexpected result" using red color and make response object inspectable 56 | debug("Unexpected result", { success: false, group: [response] }); 57 | ``` 58 | 59 | ### Screenshots 60 | 61 | ##### Sample code 62 | ![Screenshot](https://raw.githubusercontent.com/b44rd/jsbug/master/samplecode.png) 63 | 64 | ##### Default result (collapsed) 65 | ![Screenshot](https://raw.githubusercontent.com/b44rd/jsbug/master/collapsed.png) 66 | 67 | ##### Expanded result 68 | ![Screenshot](https://raw.githubusercontent.com/b44rd/jsbug/master/expanded.png) 69 | 70 | ### Support 71 | Most modern browsers. Feel free to contribute! 72 | -------------------------------------------------------------------------------- /collapsed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b44rd/jsbug/6e0b1f414644c1af69faea04bec0f73512dc070e/collapsed.png -------------------------------------------------------------------------------- /expanded.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b44rd/jsbug/6e0b1f414644c1af69faea04bec0f73512dc070e/expanded.png -------------------------------------------------------------------------------- /jsbug.js: -------------------------------------------------------------------------------- 1 | // This is free and unencumbered software released into the public domain. 2 | 3 | // Anyone is free to copy, modify, publish, use, compile, sell, or 4 | // distribute this software, either in source code form or as a compiled 5 | // binary, for any purpose, commercial or non-commercial, and by any 6 | // means. 7 | 8 | // In jurisdictions that recognize copyright laws, the author or authors 9 | // of this software dedicate any and all copyright interest in the 10 | // software to the public domain. We make this dedication for the benefit 11 | // of the public at large and to the detriment of our heirs and 12 | // successors. We intend this dedication to be an overt act of 13 | // relinquishment in perpetuity of all present and future rights to this 14 | // software under copyright law. 15 | 16 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | // EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 19 | // IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR 20 | // OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, 21 | // ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | // OTHER DEALINGS IN THE SOFTWARE. 23 | (function(name, definition) { 24 | if (typeof module != 'undefined') module.exports = definition(); 25 | else if (typeof define == 'function' && typeof define.amd == 'object') define(definition); 26 | else this[name] = definition(); 27 | }('mod', function() { 28 | "use strict"; 29 | 30 | if (typeof window === 'undefined') { 31 | // Make sure to not break SSR 32 | return function (str) { 33 | console.log(str); 34 | } 35 | } else { 36 | 37 | // Default styling 38 | var jsbug = window.localStorage.getItem("jsbug") !== null, 39 | style = "color: #fff;font-size:12pt;font-weight:normal;padding:2px 10px;border-radius:5px;"; 40 | 41 | // Turn on 42 | if (window.location.href.indexOf("jsbug=true") > -1) { 43 | window.localStorage.setItem("jsbug", true); 44 | jsbug = true; 45 | } 46 | 47 | // Turn off 48 | if (window.location.href.indexOf("jsbug=false") > -1) { 49 | window.localStorage.setItem("jsbug", false); 50 | jsbug = false; 51 | } 52 | 53 | // Initial statement 54 | if (jsbug) { 55 | window.console.log("%c! Debug enabled. Set jsbug=false to turn off", style + "background:#002C6D"); 56 | } 57 | 58 | return function(str, options) { 59 | if (jsbug) { 60 | options = options || {}; 61 | var background = "#0088CF"; 62 | var prepend = "♢ "; 63 | 64 | // Ajax 65 | if (str.indexOf("|") === 0) { 66 | background = "#FCB813" 67 | prepend = "" 68 | } 69 | 70 | // Success/failure 71 | if (typeof options.success !== "undefined") { 72 | background = options.success ? "#00A551" : "#EC1C24"; 73 | prepend = options.success ? "* " : "@ Failure! "; 74 | } 75 | 76 | // Color override 77 | if (options.color) { 78 | background = options.color 79 | } 80 | 81 | // Prepend override 82 | if (options.prepend) { 83 | prepend = options.prepend + " " 84 | } 85 | 86 | if (typeof options.group !== "undefined") { 87 | window.console.groupCollapsed("%c" + prepend + str, style + "background:" + background); 88 | for (var i = 0; i < options.group.length; i++){ 89 | window.console.log(options.group[i]); 90 | } 91 | window.console.groupEnd(); 92 | } else { 93 | window.console.log("%c" + prepend + str, style + "background:" + background); 94 | } 95 | } 96 | } 97 | } 98 | })); 99 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jsbug", 3 | "version": "1.2.0", 4 | "description": "Simple, colorful javascript debugging on demand", 5 | "main": "jsbug.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/b44rd/jsbug.git" 9 | }, 10 | "keywords": [ 11 | "jsbug", 12 | "logging", 13 | "console" 14 | ], 15 | "author": "b44rd", 16 | "license": "ISC", 17 | "bugs": { 18 | "url": "https://github.com/b44rd/jsbug/issues" 19 | }, 20 | "homepage": "https://github.com/b44rd/jsbug#readme" 21 | } 22 | -------------------------------------------------------------------------------- /samplecode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b44rd/jsbug/6e0b1f414644c1af69faea04bec0f73512dc070e/samplecode.png --------------------------------------------------------------------------------