(public).sospep.events ~ view task ~ CREATE-article-debug

<h1 style="text-align: center;">CREATE-article# #</h1>
<h2>[previously]</h2>
<ol>
<li>[2017-11-11][00:00] NEW task IN ?</li>
<ol>
<li>[x] # 7415 - CREATE-article# 5755 (this)&nbsp;</li>
</ol>
<li>[00:00] NEW article IN&nbsp;</li>
<ol>
<li>[x] # 5755 - debug - ] by Sagrott,Don - founder@sospep.com</li>
</ol></ol>
<h2>[currently]</h2>
<ol>
<li>[2017-11-06]&nbsp;NEW task IN research</li>
<ol>
<li>] <a href="https://www.youtube.com/watch?v=2zmUSoVMyRU" target="_blank">15 tricks to master chrome developer tools console</a> - 15:00 - ] contentEditable, ] docqryall ] console.time(), ]</li>
<li>] g? / y? = 'debug javascript in chrome'&nbsp;</li>
</ol>
<li>[2017-11-dd]&nbsp;NEW task IN research</li>
<ol>
<li>] test crawl json array to ] count, ] sum, ] filter(), ]&nbsp;</li>
<li>] # 7409 has this test code, see also file mac /documents/html</li>
<li>]&nbsp;https://www.w3schools.com/js/js_json_parse.asp</li>
<li>]&nbsp;https://www.w3schools.com/js/js_htmldom.asp&nbsp;</li>
</ol>
<li>[2017-11-24]&nbsp;NEW task IN research</li>
<ol>
<li>] <a href="https://www.youtube.com/watch?v=-3Whcyf6pBE" target="_blank">VIDEO</a> -supercharge your js debugging workflow - msbuild ,guy = jsteam</li>
<li>] electron based app</li>
<li>] diff VS sublime or atom IS integrated debug experience</li>
<li>] ex debugging js(node) on the server</li>
<li>] typical workflow =&nbsp; ..., console.log</li>
<li>] </li>
</ol>
<li>other</li>
<ol>
<li>] topnav value get set FROM</li>
<li>]</li>
</ol></ol>
<h2>[next]</h2>
<ol>
<li>[] NEW task IN&nbsp;</li>
<ol>
<li>] CREATE-article# # - 15 tips&nbsp;</li>
</ol>
<li>[] CREATE-list# # - 15 tips</li>
<ol>
<li>[1] [00:00] selectors -&nbsp;</li>
<li>] selector using jq $('#') || $(.class) || $('tag')</li>
<li>] selector w/out jq $('a') === document.querySelector('a') &nbsp; PRB = selects only 1 matching element</li>
<li>] selector w/out jq document.querySelectorAll('a') to return many</li>
<li>] can use length method to determine how many elements match //&nbsp;document.querySelectorAll('a').length</li>
<li>] can use $$('a') as shorthand for querySelectorAll method</li>
<li>=============</li>
<li>[2]&nbsp;[00:00]&nbsp;to preserve the values logged in the console after page reload</li>
<li>] if you refresh/reload page, the contents of your console's logged events is lost &nbsp;</li>
<li>] use RC in console window, choose option ' preserve log' to save all logged console vals, even after page refresh/reload\</li>
<li>]&nbsp;</li>
<li>=============</li>
<li>[3]&nbsp;[00:00]&nbsp;using contentEditable - &nbsp;set document.body.contentEditable property = True and page becomes an editor</li>
<li>=============</li>
<li>[4]&nbsp;[00:00]&nbsp;to return complete vars,&nbsp;</li>
<li>] DONT use console.log(window + window) as you will get Object object - &nbsp;</li>
<li>] DO use console.log (window, window ), you wil get all window DOM tree</li>
<li>] of course you can select whatever DOM selection you would like to inspect,&nbsp;</li>
<li>] ex .log('body', document.body)&nbsp;</li>
<li>] and even multiple items in a single log statement</li>
<li>]&nbsp;</li>
<li>==============&nbsp;</li>
<li>[5] [<a href="https://youtu.be/2zmUSoVMyRU?t=190" target="_blank">03:10</a>] get all events ?tied? to an 'element'</li>
<li>&nbsp;] ex element 'myInput'</li>
<li>] pass your element to the getEventListeners method returns listing of all event listeners associated with that element</li>
<li>] ex getEventListeners($('#myInput));&nbsp;</li>
<li>]</li>
<li>===============</li>
<li>[6] [<a href="https://youtu.be/2zmUSoVMyRU?t=245" target="_blank">04:05</a>] get events ?tied? to an 'element action'&nbsp;</li>
<li>] ex element myInput, action = click() or 'enter text' or ???</li>
<li>] ex call monitorEvents( $('#myInput'))&nbsp;</li>
<li>] this monitors all events associated with that element and can contain a lot of events ( mousemove, mouseover, keydown, keyup, .. )</li>
<li>] to select specific events only , pass the event name with the element name in the call to monitor Events</li>
<li>] ex &nbsp;monitorEvents( $('#myInput'), 'click')</li>
<li>] pass an array. of event names to monitor a selected set of events</li>
<li>] ex call monitorEvents( $('#myInput'), ['click', 'keypress', 'mouseover']);</li>
<li>] call unmonitorEvents(element) to stop the monitoring of events</li>
<li>] ex&nbsp;unmonitorEvents( $('#myInput') )&nbsp;&nbsp;</li>
<li>================&nbsp;</li>
<li>[7]&nbsp;[<a href="https://youtu.be/2zmUSoVMyRU?t=375" target="_blank">06:15</a>]&nbsp;use console.time to time your specified processes&nbsp;&nbsp;</li>
<li>[] call console.time() with a 'name' aka identifier for your timed process, where you want the timing to begin&nbsp;</li>
<li>[] ex console.time('myTimer')&nbsp;</li>
<li>[] call console.timeEnd() with the indentifier for your timed process, at the point where you want to stop the timing process. It returns a value, specified in ?ms?, for the timed process&nbsp;</li>
<li>[] ex console.timeEnd('myTimer') &nbsp;</li>
<li>[]&nbsp;</li>
<li>================&nbsp;</li>
<li>[] console.error, .group, .groupCollapsed</li>
<li>+= #10] type expression (2+2) //4; access result of expression using $_ &nbsp;] profile, ] count, ]&nbsp;</li>
</ol>
<li>[] # # - CREATE-list#</li>
<ol>
<li>[] 14 must know chrome dev tools tricks - ] by wes bos - 10:36 - https://www.youtube.com/watch?v=xkzDaKwinA8</li>
<li>[1] where is the code - have some code that is executing on/changing some element, but dont know where it is/which code it is - ] inspect element, ] look for element attribute that is being changed, ex background color, right click on dom element and set breakpoint using options set breakpoint option = attribute modifications , when clicked it will show where code is, remove bp by return to elements panel and uncheck set bp on attribute modifications&nbsp;</li>
<li>[me] set breakpoint on console.log error -&nbsp;</li>
<li>[2] console.log - interpolated -&nbsp;</li>
<li>] ex console.log('my name is %S and i love js','S');</li>
<li>] console.log - interpolated using es6 backticks</li>
<li>] &nbsp;ex&nbsp;console.log(`my name is ${var} and i love js`);</li>
<li>[3] styling console text</li>
<li>[]&nbsp;</li>
</ol>
<li>[]&nbsp;# # - CREATE-list#,&nbsp;irish, paul, chrome/dev tools engineer @ g</li>
<ol>
<li>[] writing functions in console, now detects return char so you can enter multi line inputs ....</li>
<li>[]&nbsp;</li>
<li>[] asynch debugging - can set 'inline' breakpoints, which enable effective debugging of asynch code</li>
<li>[] authoring edit in devtools, edit in dev tools, save to disk</li>
</ol></ol>

~ view task ~ TaskGroup] month-ahead FROM [ Plan] plan-period IN [ calendars] prj-022-sospep