├── README.md ├── LICENSE.md ├── console.css └── console.js /README.md: -------------------------------------------------------------------------------- 1 | ## Simple console emulator for [jsfiddle](https://jsfiddle.net/) 2 | 3 | **jsfiddle-console** emulates `console.log` and `console.error` in [jsfiddle](https://jsfiddle.net/). 4 | 5 | Add the following URL to `External Resources` in jsfiddle then you will see `console.log` and `console.error` in the result screen. 6 | 7 | ``` 8 | https://rawgit.com/eu81273/jsfiddle-console/master/console.js 9 | ``` 10 | 11 | ### Example 12 | You can check the jsfiddle example from the link below. 13 | 14 | https://jsfiddle.net/op9wumdz/ 15 | 16 | 17 | ### License 18 | 19 | The MIT License. 20 | 21 | Copyright ⓒ 2016 Aiden Ahn. 22 | 23 | See [LICENSE](https://github.com/eu81273/jsfiddle-console/blob/master/LICENSE.md) 24 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Jaeha Ahn (Aiden) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /console.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | } 4 | 5 | *, *:before, *:after { 6 | box-sizing: inherit; 7 | } 8 | 9 | body, 10 | html { 11 | width: 100vw; 12 | height: 100vh; 13 | margin: 0; 14 | padding: 0; 15 | background-color: #212121; 16 | color: white; 17 | } 18 | 19 | #kb-console-log { 20 | --color: #b9b5b8; 21 | --background: #0f3642; 22 | } 23 | 24 | #kb-console-log { 25 | --background: #0f3642; 26 | font-size: 16px; 27 | line-height: 20px; 28 | font-family: 'Ubuntu Mono', monospace; 29 | background-color: #0f3642; 30 | overflow-y: visible; 31 | padding: 10px; 32 | box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0 30px 1px rgba(0, 0, 0, 0.2); 33 | position: absolute; 34 | bottom: 0; 35 | margin: 10px; 36 | border-radius: 0 0 7px 7px; 37 | margin-top: 35px; 38 | width: calc(100vw - 20px); 39 | min-height: 100px; 40 | } 41 | #kb-console-log::before { 42 | border-radius: 7px 7px 0 0; 43 | position: absolute; 44 | content: attr(data-title); 45 | display: block; 46 | width: 100%; 47 | text-overflow: ellipsis; 48 | padding: 0 80px; 49 | white-space: nowrap; 50 | overflow: hidden; 51 | height: 25px; 52 | line-height: 25px; 53 | text-align: center; 54 | color: #4c3436; 55 | font-size: 1em; 56 | background: linear-gradient(0deg, #d8d8d8, #ececec); 57 | top: -25px; 58 | left: 0; 59 | font-family: "PT Sans", sans-serif; 60 | } 61 | #kb-console-log::after { 62 | content: ""; 63 | position: absolute; 64 | top: -18px; 65 | left: 10px; 66 | width: 12px; 67 | height: 12px; 68 | background: #f95c5b; 69 | border-radius: 100%; 70 | box-shadow: 0 0 0 1px #da3d42, 22px 0 0 0 #fabe3b, 22px 0 0 1px #ecb03e, 44px 0 0 0 #38cd46, 44px 0 0 1px #2eae32; 71 | } 72 | 73 | .kb-error { 74 | color: #ff3860; 75 | } 76 | 77 | .kb-debug { 78 | color: #ffdd57; 79 | } 80 | 81 | .kb-info { 82 | color: #209cee; 83 | } 84 | 85 | .type { 86 | display: inline-flex; 87 | align-items: center; 88 | width: 70px; 89 | } 90 | -------------------------------------------------------------------------------- /console.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | var _console = window.console; 3 | var _methods = { 4 | log: window.console.log, 5 | error: window.console.error, 6 | info: window.console.info, 7 | debug: window.console.debug, 8 | clear: window.console.clear, 9 | }; 10 | 11 | function append (message, type) { 12 | let element = $('#kb-console-log'); 13 | 14 | if (!element || !element.length) { 15 | element = $(` 16 |
17 | `).appendTo('body'); 18 | } 19 | 20 | element.append(` 21 |
22 | [${ new Date().toUTCString() }] 23 | [${ type }] 24 | ${ message } 25 |
`); 26 | } 27 | 28 | function clear () { 29 | if (document.body) { 30 | document.body.innerHtml = null; 31 | } 32 | _methods.clear.call(_console); 33 | }; 34 | 35 | function message (text, color, $message) { 36 | $message = document.createElement('p'); 37 | $message.style.color = color || '#000000'; 38 | $message.innerText = text; 39 | return $message; 40 | } 41 | 42 | function write (key) { 43 | return function () { 44 | Function.prototype.apply.call(_methods[key], _console, arguments); 45 | append(Array.prototype.slice.call(arguments).join(' '), key); 46 | }; 47 | } 48 | 49 | window.console.clear = clear; 50 | window.console.error = write('error'); 51 | window.console.log = write('log'); 52 | window.console.info = write('info'); 53 | window.console.debug = write('debug'); 54 | 55 | function errorHandler (e) { 56 | e.preventDefault(); 57 | console.error(e.message); 58 | return true; 59 | } 60 | 61 | if (window.attachEvent) { 62 | window.attachEvent('onerror', errorHandler); 63 | } 64 | else { 65 | window.addEventListener('error', errorHandler, true); 66 | } 67 | }) (); 68 | --------------------------------------------------------------------------------