edit-task

Task Description: CREATE-article - ] debug, ] debugging, ] debugger, ] chrome dev tools, ] console, ]

Start Date:

Start Time:

Duration:

Priority:

Status: To Do Completed In Process

Add Photo:

Owner ID:

Content: use HTML Edit Content <h1 style="text-align: center;">CREATE-article# #</h1> <h2>[previously]</h2> <ol> <li><strong>[2017-11-11][00:00] NEW task IN ?</strong></li> <ol> <li>[x] # 7415 - CREATE-article# 5755 (this)&nbsp;</li> </ol> <li><strong>[00:00] NEW article IN&nbsp;</strong></li> <ol> <li>[x] # 5755 - debug - ] by Sagrott,Don - founder@sospep.com</li> </ol></ol> <h2>[currently]</h2> <ol> <li><strong>[2017-11-06]&nbsp;NEW task IN research</strong></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><strong>[2017-11-dd]&nbsp;NEW task IN research</strong></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><strong>[2017-11-24]&nbsp;NEW task IN research</strong></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><strong>[] NEW task IN&nbsp;</strong></li> <ol> <li>] CREATE-article# # - 15 tips&nbsp;</li> </ol> <li><strong>[] CREATE-list# # - 15 tips</strong></li> <ol> <li><strong>[1] [00:00] selectors -&nbsp;</strong></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><strong>[2]&nbsp;<strong>[00:00]&nbsp;</strong>to preserve the values logged in the console after page reload</strong></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><strong>[3]&nbsp;<strong>[00:00]&nbsp;</strong>using contentEditable</strong> - &nbsp;set document.body.contentEditable property = True and page becomes an editor</li> <li>=============</li> <li><strong>[4]&nbsp;<strong>[00:00]&nbsp;</strong>to return complete vars,</strong>&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><strong>[5] [<a href="https://youtu.be/2zmUSoVMyRU?t=190" target="_blank">03:10</a>] get all events ?tied? to an 'element'</strong></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><strong>[6] [<a href="https://youtu.be/2zmUSoVMyRU?t=245" target="_blank">04:05</a>] get events ?tied? to an 'element action'&nbsp;</strong></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><strong>] to select specific events only , pass the event name with the element name in the call to monitor Events</strong></li> <li>] ex &nbsp;monitorEvents( $('#myInput'), 'click')</li> <li><strong>] pass an array. of event names to monitor a selected set of events</strong></li> <li>] ex call monitorEvents( $('#myInput'), ['click', 'keypress', 'mouseover']);</li> <li><strong>] call unmonitorEvents(element) to stop the monitoring of events</strong></li> <li>] ex&nbsp;unmonitorEvents( $('#myInput') )&nbsp;&nbsp;</li> <li>================&nbsp;</li> <li><strong>[7]&nbsp;<strong><strong>[<a href="https://youtu.be/2zmUSoVMyRU?t=375" target="_blank">06:15</a>]&nbsp;</strong></strong>use console.time to time your specified processes&nbsp;</strong>&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><strong>[] # # - CREATE-list#</strong></li> <ol> <li>[] 14 must know chrome dev tools tricks - ] by wes bos - 10:36 - https://www.youtube.com/watch?v=xkzDaKwinA8</li> <li><strong>[1] where is the code -</strong> 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><strong>[2] console.log - interpolated -&nbsp;</strong></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><strong>[3] styling console text</strong></li> <li>[]&nbsp;</li> </ol> <li><strong>[]&nbsp;<strong># # - CREATE-list#,&nbsp;</strong>irish, paul, chrome/dev tools engineer @ g</strong></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>