├── .gitignore ├── .npmignore ├── .travis.yml ├── LICENSE ├── MIGRATING.md ├── README.md ├── build ├── jsdoc.conf.json └── karma.conf.js ├── console-log-html.js ├── console-log-html.min.js ├── jsdoc ├── ConsoleLogHTML.html ├── console-log-html.js.html ├── fonts │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.svg │ ├── glyphicons-halflings-regular.ttf │ ├── glyphicons-halflings-regular.woff │ └── glyphicons-halflings-regular.woff2 ├── img │ ├── glyphicons-halflings-white.png │ └── glyphicons-halflings.png ├── index.html ├── namespaces.list.html ├── quicksearch.html ├── scripts │ ├── docstrap.lib.js │ ├── fulltext-search-ui.js │ ├── fulltext-search.js │ ├── lunr.min.js │ ├── prettify │ │ ├── Apache-License-2.0.txt │ │ ├── jquery.min.js │ │ ├── lang-css.js │ │ └── prettify.js │ ├── sunlight.js │ └── toc.js └── styles │ ├── darkstrap.css │ ├── prettify-tomorrow.css │ ├── site.cerulean.css │ ├── site.cosmo.css │ ├── site.cyborg.css │ ├── site.darkly.css │ ├── site.darkstrap.css │ ├── site.dibs-bootstrap.css │ ├── site.flatly.css │ ├── site.journal.css │ ├── site.lumen.css │ ├── site.paper.css │ ├── site.readable.css │ ├── site.sandstone.css │ ├── site.simplex.css │ ├── site.slate.css │ ├── site.spacelab.css │ ├── site.superhero.css │ ├── site.united.css │ ├── site.yeti.css │ ├── sunlight.dark.css │ └── sunlight.default.css ├── package.json └── test ├── jquery.min.js └── test-logger.js /.gitignore: -------------------------------------------------------------------------------- 1 | /.idea 2 | /node_modules 3 | /coverage -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | /.idea 2 | /jsdoc 3 | /coverage 4 | /*.html 5 | /*.min.js 6 | /*.css -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 8 4 | 5 | cache: 6 | directories: 7 | - node_modules 8 | - /usr/local/phantomjs 9 | 10 | script: npm run travis 11 | 12 | before_install: 13 | - export DISPLAY=:99.0 14 | - sh -e /etc/init.d/xvfb start 15 | 16 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | GNU LESSER GENERAL PUBLIC LICENSE 2 | Version 3, 29 June 2007 3 | 4 | Copyright (C) 2007 Free Software Foundation, Inc. 5 | Everyone is permitted to copy and distribute verbatim copies 6 | of this license document, but changing it is not allowed. 7 | 8 | 9 | This version of the GNU Lesser General Public License incorporates 10 | the terms and conditions of version 3 of the GNU General Public 11 | License, supplemented by the additional permissions listed below. 12 | 13 | 0. Additional Definitions. 14 | 15 | As used herein, "this License" refers to version 3 of the GNU Lesser 16 | General Public License, and the "GNU GPL" refers to version 3 of the GNU 17 | General Public License. 18 | 19 | "The Library" refers to a covered work governed by this License, 20 | other than an Application or a Combined Work as defined below. 21 | 22 | An "Application" is any work that makes use of an interface provided 23 | by the Library, but which is not otherwise based on the Library. 24 | Defining a subclass of a class defined by the Library is deemed a mode 25 | of using an interface provided by the Library. 26 | 27 | A "Combined Work" is a work produced by combining or linking an 28 | Application with the Library. The particular version of the Library 29 | with which the Combined Work was made is also called the "Linked 30 | Version". 31 | 32 | The "Minimal Corresponding Source" for a Combined Work means the 33 | Corresponding Source for the Combined Work, excluding any source code 34 | for portions of the Combined Work that, considered in isolation, are 35 | based on the Application, and not on the Linked Version. 36 | 37 | The "Corresponding Application Code" for a Combined Work means the 38 | object code and/or source code for the Application, including any data 39 | and utility programs needed for reproducing the Combined Work from the 40 | Application, but excluding the System Libraries of the Combined Work. 41 | 42 | 1. Exception to Section 3 of the GNU GPL. 43 | 44 | You may convey a covered work under sections 3 and 4 of this License 45 | without being bound by section 3 of the GNU GPL. 46 | 47 | 2. Conveying Modified Versions. 48 | 49 | If you modify a copy of the Library, and, in your modifications, a 50 | facility refers to a function or data to be supplied by an Application 51 | that uses the facility (other than as an argument passed when the 52 | facility is invoked), then you may convey a copy of the modified 53 | version: 54 | 55 | a) under this License, provided that you make a good faith effort to 56 | ensure that, in the event an Application does not supply the 57 | function or data, the facility still operates, and performs 58 | whatever part of its purpose remains meaningful, or 59 | 60 | b) under the GNU GPL, with none of the additional permissions of 61 | this License applicable to that copy. 62 | 63 | 3. Object Code Incorporating Material from Library Header Files. 64 | 65 | The object code form of an Application may incorporate material from 66 | a header file that is part of the Library. You may convey such object 67 | code under terms of your choice, provided that, if the incorporated 68 | material is not limited to numerical parameters, data structure 69 | layouts and accessors, or small macros, inline functions and templates 70 | (ten or fewer lines in length), you do both of the following: 71 | 72 | a) Give prominent notice with each copy of the object code that the 73 | Library is used in it and that the Library and its use are 74 | covered by this License. 75 | 76 | b) Accompany the object code with a copy of the GNU GPL and this license 77 | document. 78 | 79 | 4. Combined Works. 80 | 81 | You may convey a Combined Work under terms of your choice that, 82 | taken together, effectively do not restrict modification of the 83 | portions of the Library contained in the Combined Work and reverse 84 | engineering for debugging such modifications, if you also do each of 85 | the following: 86 | 87 | a) Give prominent notice with each copy of the Combined Work that 88 | the Library is used in it and that the Library and its use are 89 | covered by this License. 90 | 91 | b) Accompany the Combined Work with a copy of the GNU GPL and this license 92 | document. 93 | 94 | c) For a Combined Work that displays copyright notices during 95 | execution, include the copyright notice for the Library among 96 | these notices, as well as a reference directing the user to the 97 | copies of the GNU GPL and this license document. 98 | 99 | d) Do one of the following: 100 | 101 | 0) Convey the Minimal Corresponding Source under the terms of this 102 | License, and the Corresponding Application Code in a form 103 | suitable for, and under terms that permit, the user to 104 | recombine or relink the Application with a modified version of 105 | the Linked Version to produce a modified Combined Work, in the 106 | manner specified by section 6 of the GNU GPL for conveying 107 | Corresponding Source. 108 | 109 | 1) Use a suitable shared library mechanism for linking with the 110 | Library. A suitable mechanism is one that (a) uses at run time 111 | a copy of the Library already present on the user's computer 112 | system, and (b) will operate properly with a modified version 113 | of the Library that is interface-compatible with the Linked 114 | Version. 115 | 116 | e) Provide Installation Information, but only if you would otherwise 117 | be required to provide such information under section 6 of the 118 | GNU GPL, and only to the extent that such information is 119 | necessary to install and execute a modified version of the 120 | Combined Work produced by recombining or relinking the 121 | Application with a modified version of the Linked Version. (If 122 | you use option 4d0, the Installation Information must accompany 123 | the Minimal Corresponding Source and Corresponding Application 124 | Code. If you use option 4d1, you must provide the Installation 125 | Information in the manner specified by section 6 of the GNU GPL 126 | for conveying Corresponding Source.) 127 | 128 | 5. Combined Libraries. 129 | 130 | You may place library facilities that are a work based on the 131 | Library side by side in a single library together with other library 132 | facilities that are not Applications and are not covered by this 133 | License, and convey such a combined library under terms of your 134 | choice, if you do both of the following: 135 | 136 | a) Accompany the combined library with a copy of the same work based 137 | on the Library, uncombined with any other library facilities, 138 | conveyed under the terms of this License. 139 | 140 | b) Give prominent notice with the combined library that part of it 141 | is a work based on the Library, and explaining where to find the 142 | accompanying uncombined form of the same work. 143 | 144 | 6. Revised Versions of the GNU Lesser General Public License. 145 | 146 | The Free Software Foundation may publish revised and/or new versions 147 | of the GNU Lesser General Public License from time to time. Such new 148 | versions will be similar in spirit to the present version, but may 149 | differ in detail to address new problems or concerns. 150 | 151 | Each version is given a distinguishing version number. If the 152 | Library as you received it specifies that a certain numbered version 153 | of the GNU Lesser General Public License "or any later version" 154 | applies to it, you have the option of following the terms and 155 | conditions either of that published version or of any later version 156 | published by the Free Software Foundation. If the Library as you 157 | received it does not specify a version number of the GNU Lesser 158 | General Public License, you may choose any version of the GNU Lesser 159 | General Public License ever published by the Free Software Foundation. 160 | 161 | If the Library as you received it specifies that a proxy can decide 162 | whether future versions of the GNU Lesser General Public License shall 163 | apply, that proxy's public statement of acceptance of any version is 164 | permanent authorization for you to choose that version for the 165 | Library. 166 | -------------------------------------------------------------------------------- /MIGRATING.md: -------------------------------------------------------------------------------- 1 | # 1.x to 2.0 2 | 3 | A breaking change has been made to console.log, making it follow 4 | [MDN's specification](https://developer.mozilla.org/en-US/docs/Web/API/Console/log). 5 | Skipping HTML output is now available via the `skipHtml` property, e.g.: 6 | 7 | ```js 8 | console.skipHtml.log("foo"); 9 | console.skipHtml.error("foo"); 10 | ``` -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | A tiny library that overrides the browser's `console.*` functions allowing the logged messages to be displayed in HTML. 2 | 3 | [![Coverage Status](https://coveralls.io/repos/github/Alorel/console-log-html/badge.svg?branch=master)](https://coveralls.io/github/Alorel/console-log-html?branch=master) 4 | [![Build Status](https://travis-ci.org/Alorel/console-log-html.svg?branch=master)](https://travis-ci.org/Alorel/console-log-html) 5 | [![Deps](https://david-dm.org/alorel/console-log-html.svg)](https://david-dm.org/alorel/console-log-html#info=dependencies&view=list) 6 | [![Deps](https://david-dm.org/alorel/console-log-html/dev-status.svg)](https://david-dm.org/alorel/console-log-html#info=devDependencies&view=list) 7 | 8 | [![NPM](https://nodei.co/npm/console-log-html.png?downloads=true&downloadRank=true&stars=true)](https://www.npmjs.com/package/console-log-html) 9 | 10 | Migrating from `1.x` to `2.0`? See [MIGRATING.md](https://github.com/Alorel/console-log-html/blob/master/MIGRATING.md) 11 | 12 | # Installation: 13 | 14 | Simply include the file on your page: 15 | ```html 16 | 17 | 18 | 19 | ``` 20 | 21 | It can also be included as a dependency from [npm](https://www.npmjs.com/package/console-log-html): 22 | ``` 23 | npm install console-log-html --save 24 | ``` 25 | ```javascript 26 | (function(){ // Your closure 27 | var ConsoleLogHTML = require('console-log-html'); 28 | })(); 29 | ``` 30 | 31 | # Usage: 32 | 33 | ```html 34 | 35 | 36 | 40 | ``` 41 | 42 | You can also instruct the script to only log to the console by passing a second argument to `console.*()`, e.g.: 43 | 44 | ```javascript 45 | console.log("foo"); // Logs "foo" to HTML 46 | console.log("Look, some JSON:", {foo: 'bar'}); // Logs "Look, some JSON: Object {"foo":"bar"}" to HTML 47 | console.skipHtml.log("bar"); // Logs only to the console 48 | ``` 49 | 50 | ## Customisation 51 | 52 | ### Default styles 53 | The default css classes can be overriden in `ConsoleLogHTML.DEFAULTS`: 54 | 55 | ```javascript 56 | ConsoleLogHTML.DEFAULTS.error = "some-error-css-class"; // Will be applied to console.error() 57 | ConsoleLogHTML.DEFAULTS.log = "another-override"; // Will be applied to console.log() 58 | ``` 59 | 60 | ### During connect() 61 | 62 | The connect method has the following signature: 63 | ```javascript 64 | function connect(target, options, includeTimestamp, logToConsole, appendAtBottom){} 65 | ``` 66 | 67 | - `target` has already been covered - it's the <ul> element 68 | - `options` allows you to override the css classes in `ConsoleLogHTML.DEFAULTS` for the duration of the `connect`, i.e. it 69 | would not save the values. For example, if you wanted to override the `log` and `warn` CSS classes you could pass the object 70 | 71 | ```json 72 | { 73 | "warn": "my-warn-css-class", 74 | "log": "my-log-css-class" 75 | } 76 | ``` 77 | - `includeTimestamp` - when set to `true` (the default value), a timestamp will be prepended to each message as it 78 | appears in the <ul>. The timestamp's format depends on the user as it is created via 79 | 80 | ```javascript 81 | (new Date()).toLocaleTimeString() 82 | ``` 83 | - `logToConsole` - when set to `true` (the default value), appear both in the console *and* the <ul>; when set 84 | to `false`, they appear only in the <ul>. 85 | - `appendAtBottom` - when set to `true` (default=`false`), log messages will be appended at the end of the <ul>-list. 86 | 87 | ---------- 88 | 89 | More information: 90 | 91 | - [Demo](https://alorel.github.io/console-log-html) 92 | - [API documentation](https://alorel.github.io/console-log-html/jsdoc) 93 | - [Test coverage](https://coveralls.io/github/Alorel/console-log-html?branch=master) 94 | -------------------------------------------------------------------------------- /build/jsdoc.conf.json: -------------------------------------------------------------------------------- 1 | { 2 | "tags": { 3 | "allowUnknownTags": true 4 | }, 5 | "plugins": [ 6 | "plugins/markdown" 7 | ], 8 | "templates": { 9 | "logoFile": "", 10 | "cleverLinks": false, 11 | "monospaceLinks": false, 12 | "dateFormat": "dddd, Do MMMM, Y", 13 | "outputSourceFiles": true, 14 | "outputSourcePath": true, 15 | "systemName": "ConsoleLogHTML", 16 | "footer": "", 17 | "copyright": "Created and maintained by Alorel. Source available here.", 18 | "navType": "vertical", 19 | "theme": "simplex", 20 | "linenums": true, 21 | "collapseSymbols": false, 22 | "inverseNav": true, 23 | "protocol": "html://", 24 | "methodHeadingReturns": false, 25 | "analytics": { 26 | "ua": "UA-76993341-1", 27 | "domain": "auto" 28 | } 29 | }, 30 | "markdown": { 31 | "parser": "gfm", 32 | "hardwrap": true 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /build/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration 2 | // Generated on Tue May 10 2016 18:49:46 GMT+0100 (GMT Daylight Time) 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | 7 | // base path that will be used to resolve all patterns (eg. files, exclude) 8 | basePath: '../', 9 | 10 | 11 | // frameworks to use 12 | // available frameworks: https://npmjs.org/browse/keyword/karma-adapter 13 | frameworks: ['jasmine'], 14 | 15 | // list of files / patterns to load in the browser 16 | files: [ 17 | "test/jquery.min.js", 18 | 'node_modules/jasmine-jquery/lib/jasmine-jquery.js', 19 | '*.js', 20 | 'test/*.js' 21 | ], 22 | 23 | // list of files to exclude 24 | exclude: [ 25 | '*.min.js' 26 | ], 27 | 28 | // preprocess matching files before serving them to the browser 29 | // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor 30 | preprocessors: { 31 | '*.js': ['coverage'] 32 | }, 33 | 34 | 35 | // test results reporter to use 36 | // possible values: 'dots', 'progress' 37 | // available reporters: https://npmjs.org/browse/keyword/karma-reporter 38 | reporters: ['progress', 'coverage'], 39 | 40 | coverageReporter: { 41 | dir: 'coverage/', 42 | subdir: '.', 43 | includeAllSources: true, 44 | reporters: [ 45 | { 46 | type: 'html' 47 | }, 48 | { 49 | type: 'lcovonly' 50 | } 51 | ] 52 | }, 53 | 54 | 55 | // web server port 56 | port: 9876, 57 | 58 | 59 | // enable / disable colors in the output (reporters and logs) 60 | colors: true, 61 | 62 | 63 | // level of logging 64 | // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG 65 | logLevel: config.LOG_INFO, 66 | 67 | 68 | // enable / disable watching file and executing tests whenever any file changes 69 | autoWatch: false, 70 | 71 | 72 | // start these browsers 73 | // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher 74 | browsers: ['PhantomJS2'], 75 | 76 | 77 | // Continuous Integration mode 78 | // if true, Karma captures browsers, runs the tests and exits 79 | singleRun: true, 80 | 81 | // Concurrency level 82 | // how many browser should be started simultaneous 83 | concurrency: Infinity 84 | }) 85 | }; 86 | -------------------------------------------------------------------------------- /console-log-html.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Redirects console output to an <ul> element 3 | * @namespace 4 | */ 5 | var ConsoleLogHTML = (function (original, methods, console, Object, TYPE_UNDEFINED, TYPE_BOOLEAN, INSTANCE_OBJECT_OBJECT) { 6 | 'use strict'; 7 | for (var i = 0; i < methods.length; i++) { 8 | if (TYPE_UNDEFINED !== typeof console[methods[i]]) { 9 | original[methods[i]] = console[methods[i]]; 10 | } 11 | } 12 | 13 | var originalSkipHtml = console.skipHtml, 14 | originalKeys = Object.keys(original), 15 | originalClear = TYPE_UNDEFINED !== typeof console.clear ? console.clear : false, 16 | jQueryIsUp = typeof jQuery !== TYPE_UNDEFINED ? jQuery : false, 17 | extend = function () { 18 | var out = {}, 19 | i = 0, 20 | j, keys; 21 | 22 | for (; i < arguments.length; i++) { 23 | keys = Object.keys(arguments[i]); 24 | for (j = 0; j < keys.length; j++) { 25 | out[keys[j]] = arguments[i][keys[j]]; 26 | } 27 | } 28 | 29 | return out; 30 | }, 31 | register = function (method, target, options, includeTimestamp, logToConsole, appendAtBottom) { 32 | 33 | console.skipHtml[method] = function () { 34 | original[method].apply(console, arguments); 35 | }; 36 | 37 | console[method] = function () { 38 | var finalMsg, msgPart, i, li; 39 | 40 | finalMsg = ""; 41 | for (i = 0; i < arguments.length; i++) { 42 | msgPart = arguments[i] + ""; // "safe toString()" (works with null & undefined) 43 | if (msgPart === INSTANCE_OBJECT_OBJECT) { 44 | try { 45 | // Prefix with "Object" like in Firefox-, Chrome-, and node.js-output 46 | msgPart = "Object " + JSON.stringify(arguments[i]); 47 | } catch (e) { 48 | 49 | } 50 | } 51 | 52 | finalMsg += (i > 0 ? " " : "") + msgPart; 53 | } 54 | 55 | finalMsg = (includeTimestamp ? "[" + (new Date()).toLocaleTimeString() + "] " : "") + finalMsg; 56 | li = document.createElement("li"); 57 | li.setAttribute("data-level", method); 58 | li.innerText = finalMsg; 59 | if (options[method]) { 60 | li.setAttribute("class", options[method]); 61 | } 62 | 63 | if (appendAtBottom){ 64 | target.appendChild(li); 65 | } else { 66 | target.insertBefore(li, target.firstChild); 67 | } 68 | 69 | if (logToConsole) { 70 | console.skipHtml[method].apply(console, arguments); 71 | } 72 | }; 73 | }; 74 | 75 | return { 76 | /** 77 | * Default CSS classes 78 | * @type Object 79 | * @memberof ConsoleLogHTML 80 | * @prop {?string} error=text-danger The default CSS class for error messages 81 | * @prop {?string} warn=text-warning The default CSS class for warning messages 82 | * @prop {?string} info=text-success The default CSS class for info messages 83 | * @prop {?string} debug=text-info The default CSS class for debug messages 84 | * @prop {?string} log=null The default CSS class for log messages 85 | */ 86 | DEFAULTS: { 87 | error: "text-danger", 88 | warn: "text-warning", 89 | info: "text-success", 90 | debug: "text-info", 91 | log: "" 92 | }, 93 | /** 94 | * Disconnect our console overrides, reverting to the original state 95 | * @memberof ConsoleLogHTML 96 | */ 97 | disconnect: function () { 98 | console.skipHtml = originalSkipHtml; 99 | for (var i = 0; i < originalKeys.length; i++) { 100 | console[originalKeys[i]] = original[originalKeys[i]]; 101 | } 102 | if (false !== originalClear) { 103 | console.clear = originalClear; 104 | } 105 | }, 106 | /** 107 | * Overwrite the original console.* methods and start outputting to screen 108 | * @memberof ConsoleLogHTML 109 | * @param {$|jQuery|HTMLUListElement} target The target <ul> element to output to. Can can either be a 110 | * jQuery or vanilla JS HTMLUListElement. 111 | * @param {Object} [options=ConsoleLogHTML.DEFAULTS] CSS class options. See {@link ConsoleLogHTML.DEFAULTS} for 112 | * default values. 113 | * @param {boolean} [includeTimestamp=true] Whether to include the log message timestamp in HTML 114 | * @param {boolean} [logToConsole=true] Whether to continue logging to the console as well as HTML. 115 | * @param {boolean} [appendAtBottom=false] Whether to append the log messages at the end of the ul-list 116 | * @throws {Error} If target is not an <ul> element 117 | */ 118 | connect: function (target, options, includeTimestamp, logToConsole, appendAtBottom) { 119 | if (jQueryIsUp && target instanceof jQueryIsUp) { 120 | target = target[0]; 121 | } 122 | if (typeof logToConsole !== TYPE_BOOLEAN) { 123 | logToConsole = true; 124 | } 125 | if (typeof includeTimestamp !== TYPE_BOOLEAN) { 126 | includeTimestamp = true; 127 | } 128 | if (!(target instanceof HTMLUListElement)) { 129 | throw new Error("The target must be a HTML