debugout.js
Version:
Generates a text file from your logs.
276 lines (253 loc) • 11.3 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="robots" content="index,follow">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Debugout.js</title>
<link rel="stylesheet" type="text/css" href="https://inorganik.github.io/assets/css/style.css?v=20191111">
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-7742845-9', 'inorganik.github.io');
ga('send', 'pageview');
</script>
</head>
<body>
<a class="forkMe" href="https://github.com/inorganik/debugout.js"><img
src="https://inorganik.github.io/assets/img/forkme_custom_indigo.png" alt="Fork me on GitHub"></a>
<div id="wrap">
<header>
<div id="github"><a class="block" href="https://github.com/inorganik"></a></div>
<div class="leaderLine">
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
</div>
<div id="logo"><a class="block" href="http://inorganik.github.io"></a></div>
</header>
<section>
<h1>debugout.js <small id="version" class="lt-gray"></small></h1>
<p>debugout.js (debug output) generates a text file from your logs that can be searched, timestamped,
downloaded and more. See examples and usage on GitHub.</p>
<p>Install via npm/yarn using the package name <code class="indigo large">debugout.js</code>.</p>
<h3 class="marginTop marginBottom"><a class="lime weight700"
href="https://github.com/inorganik/debugout.js">Download on GitHub</a></h3>
</section>
<section>
<div class="col-inner-no-lr">
<p class="large weight300">Create a new debugout object and replace "console" with your instance of Debugout. Try it in your console using "bugout" instead of "console".</p>
<p class="large weight300 noMargin"> The following logs (in purple) produce the output (in green) below:</p>
</div>
</section>
<section>
<div class="col full marginTop">
<div class="code-contain marginBottom indigo">
<code>const bugout = new Debugout();<br>
bugout.warn('a warning');<br>
bugout.error('an error');<br>
bugout.log('A date:', d);<br>
bugout.log('An array:', arr);<br>
bugout.log('A function:', testFunc);<br>
bugout.log('A regex', rgx);<br>
bugout.log('an object with nested objects and arrays...', obj);<br>
bugout.log('an array of objects...', arrayWithObjects);<br>
</code>
</div>
</div>
</section>
<section>
<form>
<h4 class="inlineLeft noMargin marginRight weight300">Get the log at run-time or any time with these
methods:</h4>
<input type="button" class="inlineLeft marginRight" value="download log" id="downloadLog">
<input type="button" class="inlineLeft marginRight" value="get log" id="getLog" style="width:100px;">
<input type="button" class="inlineLeft marginRight" value="tail" id="tail" style="width:100px;">
</form>
</section>
<section>
<form>
<h4 class="inlineLeft noMargin marginRight weight300">Also, search:</h4>
<input type="text" class="inlineLeft" value="" id="search" style="width:140px; margin-right:5px"
placeholder="ex: subgenre">
<input type="button" class="inlineLeft marginRight" value="search" id="doSearch" style="width:100px;">
<h4 class="inlineLeft noMargin marginRight weight300">And slice:</h4>
<input type="number" class="inlineLeft" value="" step="1" id="sliceStart" style="width:80px; margin-right:5px"
placeholder="line">
<input type="number" class="inlineLeft marginRight" value="" step="1" id="sliceEnd" style="width:80px"
placeholder="# of lines">
<input type="button" class="inlineLeft marginRight" value="get slice" id="doSlice" style="width:100px">
<h4 class="inlineLeft noMargin marginRight weight300">Also:</h4>
<input type="button" class="inlineLeft" value="clear" id="doClear" style="width:100px;">
</form>
</section>
<section>
<form>
<h4 class="inlineLeft noMargin weight300">Options:</h4>
<div class="inlineLeft marginLeft marginRight">
<input class="onchange" id="realTimeLoggingOn" type="checkbox" checked><label class="inlineLabel">realTimeLoggingOn</label>
</div>
<div class="inlineLeft marginRight">
<input class="onchange" id="useTimestamps" type="checkbox"><label class="inlineLabel">useTimestamps</label>
</div>
<div class="inlineLeft marginRight">
<input class="onchange" id="includeSessionMetadata" type="checkbox" checked> <label class="inlineLabel">includeSessionMetadata</label>
</div>
<div class="inlineLeft marginRight">
<input class="onchange" id="useLocalStorage" type="checkbox"> <label class="inlineLabel">useLocalStorage</label>
</div>
<div class="inlineLeft marginRight">
<input class="onchange" id="recordLogs" type="checkbox" checked> <label class="inlineLabel">recordLogs</label>
</div>
<div class="inlineLeft marginRight">
<input class="onchange" id="autoTrim" type="checkbox" checked> <label class="inlineLabel">autoTrim</label>
</div>
<div class="inlineLeft marginRight">
<input class="onchange" id="quoteStrings" type="checkbox" checked> <label class="inlineLabel">quoteStrings</label>
</div>
<div class="inlineLeft marginRight">
<input class="onchange" type="text" value="debugout.txt" id="logFilename" style="width:100px; padding:0 5px;">
<label class="inlineLabel">logFilename</label>
</div>
<div class="inlineLeft marginRight">
<input class="onchange" type="text" value="3000" id="maxLines" style="width:50px; padding:0 5px;">
<label class="inlineLabel">maxLines</label>
</div>
<div class="inlineLeft marginRight">
<input class="onchange" type="text" value="20" id="maxDepth" style="width:40px; padding:0 5px;">
<label class="inlineLabel">maxDepth</label>
</div>
<div class="inlineLeft marginRight">
<input class="onchange" type="text" value="debugout.js" id="localStorageKey" style="width:100px; padding:0 5px;">
<label class="inlineLabel">localStorageKey</label>
</div>
<div class="inlineLeft marginRight">
<input class="onchange" type="text" value=" " id="indent" style="width:50px; padding:0 5px;">
<label class="inlineLabel">indent</label>
</div>
</form>
</section>
<section class="marginBottom">
<div class="col full marginBottom marginTop">
<h4 class="weight300">Console window:</h4>
<div class="code-contain marginBottom lime" style="min-height:500px">
<code id="codeVisualizer">// Use a method above and output will be displayed here</code>
</div>
</div>
</section>
</div>
</body>
<script type="module">
import { Debugout } from './dist/debugout.js'
const el = (id) => document.getElementById(id);
// a test object
const obj = {
name: 'Jamie',
arr: ['red', 'gold', 'green', 4, true, false],
emptyString: '',
nestedObj: {
apple: 'red',
orange: 'orange',
pear: 'green',
nestedNestedObj: {
red: 0,
yellow: 6,
green: 4
}
},
date: new Date(),
flag: true,
anotherFlag: false,
}
// a date
const d = new Date();
// an array
const arr = ['some', 'test', 'array'];
// a function
const testFunc = function () {
return 'oh heck ya debugout';
}
// a regex
const rgx = new RegExp(/debugout/gi);
// array with objects
const songOne = { genre: 'Drum \'n Bass', subgenre: 'liquid' }
const songTwo = { genre: 'Dubstep', subgenre: 'brostep', someArray: arr }
const songThree = { genre: 'R&B', subgenre: 'soul revival' }
const arrayWithObjects = [songOne, songTwo, songThree];
function displayOutput(output) {
// format for html
output = output.replace(/\n/g, '<br>').replace(/ /g, ' ');
el('codeVisualizer').innerHTML = output;
}
function establishOptionsFromInputs() {
return {
realTimeLoggingOn: el('realTimeLoggingOn').checked,
useTimestamps: el('useTimestamps').checked,
includeSessionMetadata: el('includeSessionMetadata').checked,
useLocalStorage: el('useLocalStorage').checked,
recordLogs: el('recordLogs').checked,
autoTrim: el('autoTrim').checked,
quoteStrings: el('quoteStrings').checked,
logFilename: el('logFilename').value,
maxLines: Number(el('maxLines').value),
maxDepth: Number(el('maxDepth').value),
localStorageKey: el('localStorageKey').value,
indent: el('indent').value,
};
}
function logStuff() {
const options = establishOptionsFromInputs();
window.bugout = new Debugout(options);
bugout.warn('a warning');
bugout.error('an error');
bugout.log('A date:', d);
bugout.log('An array:', arr);
bugout.log('A function:', testFunc);
bugout.log('A regex:', rgx);
bugout.log('an object with nested objects and arrays...', obj);
bugout.log('an array of objects...', arrayWithObjects);
displayOutput(bugout.getLog());
}
window.onload = function () {
logStuff();
document.getElementById('version').innerHTML = 'v' + bugout.version();
document.querySelectorAll('.onchange').forEach(el => el.onchange = logStuff);
el('getLog').onclick = () => {
let output = bugout.getLog();
output += 'bugout.getLog();\n'
displayOutput(output);
}
el('downloadLog').onclick = () => {
let output = bugout.getLog();
output += 'bugout.downloadLog();';
bugout.downloadLog();
displayOutput(output);
}
el('tail').onclick = () => {
let output = 'bugout.tail(20);\n';
output += bugout.tail(20);
displayOutput(output);
}
el('doSearch').onclick = () => {
const term = el('search').value;
let output = "bugout.search('" + term + "');\n";
output += bugout.search(term);
displayOutput(output);
}
el('doSlice').onclick = () => {
const startLine = Number(el('sliceStart').value);
const endLine = Number(el('sliceEnd').value);
let output = 'bugout.slice(' + startLine + ', ' + endLine + ');\n\n';
output += bugout.slice(startLine, endLine);
displayOutput(output);
}
el('doClear').onclick = () => {
bugout.clear(true);
displayOutput(bugout.getLog());
}
}
</script>
</html>