30:T63e,md` This tool is used to easly monitor variable values without resorting to __console.log()__, which has some issues: - Runaway code can hang the browser when it prints too many log messages. - The console can take up a lot of screen realestate. - It can be a fair amount of work to visually parse out which log messages you care about. - It is kinda slow to type "console.log()" over and over again. - It is easy to forget to remove log calls. This tool attempts to fix these issues. Debug Tool is as easy as 1, 2, 3: 1. Import the tool: \`\`\`javascript import { Debug } from "@trebor/debug-tool" \`\`\` 2. Create a Debug instance in a cell: \`\`\`javascript viewof db = Debug() \`\`\` 3. Pepper your code with calls to __db()__ to show values: \`\`\`javascript let x = 40; db('x', x); // should show a value of 40 x = x * 3; db('x', x); // should show a value of 120 \`\`\` ### Usage --- \`\`\`javascript Debug() \`\`\` - **vertical** *optional boolean* If true, Debug will lay out the items vertically. Defaults to **false** - horizontal layout. --- \`\`\`javascript db(label, value, ) \`\`\` - **label** *string* Label for value. If you use the same label multiple times, the previous value will be overwritten. - **value** *any* The value you want to show. - **dontUpdate** *optional boolean* If true the value won't be updated; this way you can easly filter out some value changed. Defaults to **false** - always update. --- ### Ideas for the Future - Keep and show history of values. - Have some more visual way to see values changing. `31:T8dc,Debug = (vertical = false) => { const uid = Math.floor(Math.random() * Math.pow(10, 6)); const form = html`

DEBUG

`; const baseStyle = { border: '1px solid #ccc', 'border-radius': '3px', 'font-family': 'Courier, monospace', }; const outerStyle = { ...baseStyle, display: 'flex', 'align-self': 'flex-start', background: '#ddd', padding: '2px 3px 2px 8px', margin: '4px 4px', }; const innerStyle = { ...baseStyle, background:' white', padding: '0px 6px', margin: '0px 4px 0px 8px', }; const cancelStyle = { background: '#888', color: '', cursor: 'pointer', 'text-align': 'center', 'line-height': '10px', 'border-radius': '50%', 'font-size': '14px', width: '12px', height: '12px', }; const toString = value => { if (typeof(value) === 'undefined') return 'undefined'; if (value === null) return 'null'; return value.toString(); } form.value = (name, value, dontUpdate) => { if (dontUpdate) return; const divId = [name, uid].join('-'); const el = document.getElementById(divId); const content = ` ${name}

${toString(value)}

`; if (!el) { const child = html`

${content}

`; child.handleClick = () => { form.removeChild(child); } form.appendChild(child); } else { el.innerHTML = content; } }; return form; }32:[] 2e:{"title":"Debug Tool","cells":[{"id":775,"value":"md`# Debug Tool`","pinned":false,"hidden":false,"mode":"ojs"},{"id":923,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":779,"value":"// WARNING: this is is NOT a good example of how to use this tool,\n// see the demo's below for simpler clearer examples.\nviewof teaser = {\n const db = Debug();\n db.value('x', 90);\n db.value('y', 128.59);\n db.value('𝛑', Math.PI);\n db.value('Name', 'Joe');\n return db;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":925,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"md`# Demo of Debug Tool Instance`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"viewof db = Debug()","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":"md`# Example Use of Debug`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"example = {\n db('test', 'this is a static value')\n let i = 0;\n while (true) {\n yield Promises.delay(1000, ++i).then(value => {\n db('Value', value);\n db('Twice Value', value * 2);\n db('Mod 9', value, value % 9 !== 0);\n db('Long Name 1', value);\n db('Long Name 2', value);\n db('Long Name 3', value);\n db('Long Name 4', value);\n db('Long Name 5', value);\n return value;\n });\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":618,"value":"md`# Demo of Vertical Debug Tool Instance`","pinned":false,"hidden":false,"mode":"ojs"},{"id":613,"value":"viewof dbv = Debug(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"md`# Example Use of Vertical Debug`","pinned":false,"hidden":false,"mode":"ojs"},{"id":620,"value":"example_vertical = {\n dbv('test 2', 'this is also a static value')\n let i = 0;\n while (true) {\n yield Promises.delay(1000, i += 3).then(value => {\n dbv('Value', value);\n dbv('Twice Value', value * 2);\n dbv('Mod 9', value, value % 9 !== 0);\n dbv('long name 1', value);\n dbv('long name 2', value);\n dbv('long name 3', value);\n dbv('long name 4', value);\n dbv('long name 5', value);\n return value;\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":519,"value":"md`# Library Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":941,"value":"// logs to console\n\nfunction log(valueContainer = {}) {\n const values = (typeof valueContainer !== 'object')\n ? Array.from(arguments).map(d => [d, null])\n : Object.entries(valueContainer);\n \n if (values.length > 1) {\n console.group('L:');\n values.map(([ key, value]) => console.log(key, (value ? '=' : ''), (value || '')));\n console.groupEnd();\n } else {\n const [ key, value ] = values[0];\n console.log('L:', key, (value ? '=' : ''), (value || ''));\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":947,"value":"{\n log('hello');\n log({ cat: 5, dog: 'good'});\n log({frog: 'jump' })\n log(5);\n log('hello', 'there');\n log('hello', 53);\n}\n ","pinned":true,"hidden":false,"mode":"ojs"},{"id":145,"value":"objectToStyle = (obj) => Object.entries(obj).map(entry => entry.join(':')).join(';')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}