├── .gitignore ├── chrome ├── chrome.zip ├── img │ ├── icon16.png │ ├── icon19.png │ ├── icon38.png │ ├── icon48.png │ └── icon128.png ├── js │ ├── background.js │ ├── content.tpl.js │ └── content.js ├── popup.html └── manifest.json ├── package.json ├── LICENSE ├── README.md ├── lib └── deb.js └── example └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /chrome/chrome.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stefanbuck/deb.js/master/chrome/chrome.zip -------------------------------------------------------------------------------- /chrome/img/icon16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stefanbuck/deb.js/master/chrome/img/icon16.png -------------------------------------------------------------------------------- /chrome/img/icon19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stefanbuck/deb.js/master/chrome/img/icon19.png -------------------------------------------------------------------------------- /chrome/img/icon38.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stefanbuck/deb.js/master/chrome/img/icon38.png -------------------------------------------------------------------------------- /chrome/img/icon48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stefanbuck/deb.js/master/chrome/img/icon48.png -------------------------------------------------------------------------------- /chrome/img/icon128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stefanbuck/deb.js/master/chrome/img/icon128.png -------------------------------------------------------------------------------- /chrome/js/background.js: -------------------------------------------------------------------------------- 1 | chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { 2 | if(request.debjs && request.debjs && request.debjs.status === true) { 3 | chrome.browserAction.setBadgeText({ text: 'ON'}); 4 | } else { 5 | chrome.browserAction.setBadgeText({ text: '' }); 6 | } 7 | }); -------------------------------------------------------------------------------- /chrome/js/content.tpl.js: -------------------------------------------------------------------------------- 1 | if(/\bdebjs\b/.test(location.search)) { 2 | var s = document.createElement('script'); 3 | s.setAttribute('type', 'text/javascript'); 4 | s.innerHTML = '{debjs}'; 5 | var root = document.head || document.documentElement; 6 | root.insertBefore(s, root.firstChild); 7 | chrome.runtime.sendMessage({ debjs: {status: true}}, function(response) {}); 8 | } else { 9 | chrome.runtime.sendMessage({ debjs: {status: false}}, function(response) {}); 10 | } -------------------------------------------------------------------------------- /chrome/popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 26 | 27 | 28 |

Add debjs to your URL to get Deb.js enabled.

29 | 30 | 31 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "deb.js", 3 | "version": "0.0.1", 4 | "homepage": "https://github.com/krasimir/deb.js", 5 | "description": "Minimalistic JavaScript library for debugging in the browser", 6 | "author": { 7 | "name": "Krasimir Tsonev", 8 | "email": "info@krasimirtsonev.com", 9 | "url": "http://krasimirtsonev.com" 10 | }, 11 | "license": "MIT", 12 | "dependencies": { 13 | 14 | }, 15 | "devDependencies": { 16 | "uglify-js": "2.4.14" 17 | }, 18 | "keywords": [ 19 | "javascript", 20 | "browser", 21 | "debugger" 22 | ], 23 | "repository": { 24 | "type": "git", 25 | "url": "https://github.com/krasimir/deb.js" 26 | }, 27 | "scripts": { 28 | "build": "node ./build.js" 29 | } 30 | } -------------------------------------------------------------------------------- /chrome/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 2, 3 | "name": "Deb.js", 4 | "description": "The tiniest debugger in the world", 5 | "version": "0.0.3", 6 | "icons": { "16": "img/icon16.png", "48": "img/icon48.png", "128": "img/icon128.png" }, 7 | "browser_action": { 8 | "default_icon": { 9 | "19": "img/icon19.png", 10 | "38": "img/icon38.png" 11 | }, 12 | "default_title": "Deb.js", 13 | "default_popup": "popup.html" 14 | }, 15 | "permissions": [ 16 | "activeTab", "tabs", "storage" 17 | ], 18 | "background": { 19 | "scripts": ["js/background.js"], 20 | "persistent": false 21 | }, 22 | "content_scripts": [ 23 | { 24 | "matches": ["http://*/*", "https://*/*"], 25 | "js": ["js/content.js"], 26 | "run_at": "document_start" 27 | } 28 | ], 29 | "web_accessible_resources": [ 30 | "js/deb.min.js" 31 | ] 32 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Krasimir Tsonev 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. -------------------------------------------------------------------------------- /chrome/js/content.js: -------------------------------------------------------------------------------- 1 | if(/\bdebjs\b/.test(location.search)) { 2 | var s = document.createElement('script'); 3 | s.setAttribute('type', 'text/javascript'); 4 | s.innerHTML = '!function(o,n){"function"==typeof define&&define.amd?define([],n):n()}(this,function(){Function.prototype.debc=function(o){return Function.prototype.deb.apply(this,[o,!0])},Function.prototype.deb=function(o,n){var t,e=function(){return"rgb("+(Math.floor(76*Math.random())+200)+","+(Math.floor(76*Math.random())+200)+","+(Math.floor(76*Math.random())+200)+")"},r=function(o,e,r){"undefined"!=typeof console&&(l&&"string"==typeof o?r!==!1&&o.indexOf("%20")<0?console[e?n?"groupCollapsed":"group":"log"]("%c"+o,"background:"+t+";"+r):console[e?n?"groupCollapsed":"group":"log"](o):console[e?"group":"log"](o))},i=function(){"undefined"!=typeof console&&console.groupEnd()},c=function(n,t,e){var c=e.toString().match(/^function\s*[^\(]*\(\s*([^\)]*)\)/m)[0];if(0===n[0].indexOf("Error")&&(n=n.slice(1)),r(o+c+")",a),t&&t.length>0){r("arguments:",!0);for(var u=0;u1){r("stack trace:",!0);for(var u=0;u-1;return function(){t=e();var o=Date.now();c((new Error).stack.split(new RegExp("\\n")),arguments,f);var n=f.apply(this,Array.prototype.slice.call(arguments,0));return u(o,n),n}}});'; 5 | var root = document.head || document.documentElement; 6 | root.insertBefore(s, root.firstChild); 7 | chrome.runtime.sendMessage({ debjs: {status: true}}, function(response) {}); 8 | } else { 9 | chrome.runtime.sendMessage({ debjs: {status: false}}, function(response) {}); 10 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | deb.js 2 | ====== 3 | 4 | ### ~1.5K minimalistic JavaScript library for debugging in the browser 5 | 6 | * works on functional level 7 | * groups your `console.log` statements and place them in a proper context 8 | * displays stack traces, passed arguments and execution time 9 | 10 | ## Usage 11 | 12 | Add `deb.min.js` at the top of your page. Before every other script file. 13 | 14 | ```html 15 | 16 | ``` 17 | 18 | Add `.deb()` After the definition if your functions. 19 | 20 | ```js 21 | var calculateSomething = function(cb) { 22 | // ... 23 | }.deb(); 24 | ``` 25 | 26 | Open your console. You should see something like that: 27 | 28 | ![deb.js](http://work.krasimirtsonev.com/git/debjs/debjs.jpg) 29 | 30 | Use `.debc()` to collapse the output. 31 | 32 | ## Deb.js as Chrome extension 33 | 34 | [Deb.js in Google Web Store](https://chrome.google.com/webstore/detail/debjs/egmeoknjmgikkkcdicmajkbkmkcmbiah) 35 | 36 | There is an extension for Chrome that injects `deb.min.js` in your page. All you have to do is to open [this url](https://chrome.google.com/webstore/detail/debjs/egmeoknjmgikkkcdicmajkbkmkcmbiah) and add `debjs` somewhere in your URL. For example: 37 | 38 | http://mysite.com/ <-- Deb.js is disabled 39 | http://mysite.com?data=yes&prop=20&debjs <-- Deb.js is enabled 40 | 41 | 42 | Once you do that the extension will inject the file before your page's content and you will be able to use `.deb()` or `debc()` methods. 43 | 44 | Notice that if Deb.js is enabled you will see a small badge `ON` applied. 45 | 46 | ![deb.js](http://work.krasimirtsonev.com/git/debjs/debjschrome.png) 47 | 48 | ## Articles 49 | 50 | [Deb.js: the Tiniest Debugger in the World](http://code.tutsplus.com/tutorials/debjs-the-tiniest-debugger-in-the-world--cms-21565) 51 | 52 | ## Preview 53 | 54 | Here is an animated gif that demonstrates how Deb.js outputs information about the executed function. 55 | 56 | ![deb.js](http://work.krasimirtsonev.com/git/debjs/debjs_05.gif) 57 | 58 | ## Build 59 | 60 | 1. `npm install` 61 | 2. `npm run build` -------------------------------------------------------------------------------- /lib/deb.js: -------------------------------------------------------------------------------- 1 | (function(root, factory) { 2 | if (typeof define === 'function' && define.amd) { 3 | define([], factory); 4 | } else { 5 | factory(); 6 | } 7 | }(this, function() { 8 | Function.prototype.debc = function(desc) { 9 | return Function.prototype.deb.apply(this, [desc, true]) 10 | } 11 | Function.prototype.deb = function(desc, collapsed) { 12 | 13 | var getColor = function() { 14 | return 'rgb(' + (Math.floor((256-180)*Math.random()) + 200) + ',' + (Math.floor((256-180)*Math.random()) + 200) + ',' + (Math.floor((256-180)*Math.random()) + 200) + ')'; 15 | } 16 | var log = function(str, group, styles) { 17 | if(typeof console === 'undefined') return; 18 | if(is_chrome && typeof str === 'string') { 19 | if(styles !== false && str.indexOf('%20') < 0) { 20 | console[group ? (collapsed ? 'groupCollapsed' : 'group') : 'log']('%c' + str, 'background:' + bg + ';' + styles); 21 | } else { 22 | console[group ? (collapsed ? 'groupCollapsed' : 'group') : 'log'](str); 23 | } 24 | } else { 25 | console[group ? 'group' : 'log'](str); 26 | } 27 | } 28 | var groupEnd = function() { 29 | if(typeof console === 'undefined') return; 30 | console.groupEnd(); 31 | } 32 | var fnIn = function(stack, args, fn) { 33 | var fnDef = fn.toString().match(/^function\s*[^\(]*\(\s*([^\)]*)\)/m)[0]; 34 | // in 35 | if (stack[0].indexOf('Error') === 0) { stack = stack.slice(1); } 36 | log(desc + fnDef + ')', grouping); 37 | // arguments 38 | if(args && args.length > 0) { 39 | log('arguments:', true); 40 | for(var i=0; i 1) { 48 | log('stack trace:', true); 49 | for(var i=0; i -1; 67 | 68 | return function() { 69 | bg = getColor(); 70 | var time = Date.now(); 71 | fnIn((new Error()).stack.split(new RegExp("\\n")), arguments, fn); 72 | var res = fn.apply(this, Array.prototype.slice.call(arguments, 0)); 73 | fnOut(time, res); 74 | return res; 75 | } 76 | } 77 | })); 78 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Example 5 | 6 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 |
26 |
27 | 28 | 29 | 30 | 81 | 82 | --------------------------------------------------------------------------------