task

CREATE-article# #

[previously]

1. [2017-11-11][00:00] NEW task IN ?
1. [x] # 7415 - CREATE-article# 5755 (this) 
2. [00:00] NEW article IN 
1. [x] # 5755 - debug - ] by Sagrott,Don - founder@sospep.com

[currently]

1. [2017-11-06] NEW task IN research
1. ] 15 tricks to master chrome developer tools console - 15:00 - ] contentEditable, ] docqryall ] console.time(), ]
2. ] g? / y? = 'debug javascript in chrome' 
2. [2017-11-dd] NEW task IN research
1. ] test crawl json array to ] count, ] sum, ] filter(), ] 
2. ] # 7409 has this test code, see also file mac /documents/html
3. ] https://www.w3schools.com/js/js_json_parse.asp
4. ] https://www.w3schools.com/js/js_htmldom.asp 
3. [2017-11-24] NEW task IN research
1. ] VIDEO -supercharge your js debugging workflow - msbuild ,guy = jsteam
2. ] electron based app
3. ] diff VS sublime or atom IS integrated debug experience
4. ] ex debugging js(node) on the server
5. ] typical workflow =  ..., console.log
6. ]
4. other
1. ] topnav value get set FROM
2. ]

[next]

1. [] NEW task IN 
1. ] CREATE-article# # - 15 tips 
2. [] CREATE-list# # - 15 tips
1. [1] [00:00] selectors - 
2. ] selector using jq $('#') || $(.class) || $('tag')
3. ] selector w/out jq $('a') === document.querySelector('a')   PRB = selects only 1 matching element
4. ] selector w/out jq document.querySelectorAll('a') to return many
5. ] can use length method to determine how many elements match // document.querySelectorAll('a').length
6. ] can use $$('a') as shorthand for querySelectorAll method
7. =============
8. [2] [00:00] to preserve the values logged in the console after page reload
9. ] if you refresh/reload page, the contents of your console's logged events is lost  
10. ] use RC in console window, choose option ' preserve log' to save all logged console vals, even after page refresh/reload\
11. ] 
12. =============
13. [3] [00:00] using contentEditable -  set document.body.contentEditable property = True and page becomes an editor
14. =============
15. [4] [00:00] to return complete vars, 
16. ] DONT use console.log(window + window) as you will get Object object -  
17. ] DO use console.log (window, window ), you wil get all window DOM tree
18. ] of course you can select whatever DOM selection you would like to inspect, 
19. ] ex .log('body', document.body) 
20. ] and even multiple items in a single log statement
21. ] 
22. ============== 
23. [5] [03:10] get all events ?tied? to an 'element'
24.  ] ex element 'myInput'
25. ] pass your element to the getEventListeners method returns listing of all event listeners associated with that element
26. ] ex getEventListeners($('#myInput)); 
27. ]
28. ===============
29. [6] [04:05] get events ?tied? to an 'element action' 
30. ] ex element myInput, action = click() or 'enter text' or ???
31. ] ex call monitorEvents( $('#myInput')) 
32. ] this monitors all events associated with that element and can contain a lot of events ( mousemove, mouseover, keydown, keyup, .. )
33. ] to select specific events only , pass the event name with the element name in the call to monitor Events
34. ] ex  monitorEvents( $('#myInput'), 'click')
35. ] pass an array. of event names to monitor a selected set of events
36. ] ex call monitorEvents( $('#myInput'), ['click', 'keypress', 'mouseover']);
37. ] call unmonitorEvents(element) to stop the monitoring of events
38. ] ex unmonitorEvents( $('#myInput') )  
39. ================ 
40. [7] [06:15] use console.time to time your specified processes  
41. [] call console.time() with a 'name' aka identifier for your timed process, where you want the timing to begin 
42. [] ex console.time('myTimer') 
43. [] 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 
44. [] ex console.timeEnd('myTimer')  
45. [] 
46. ================ 
47. [] console.error, .group, .groupCollapsed
48. += #10] type expression (2+2) //4; access result of expression using $_  ] profile, ] count, ] 
3. [] # # - CREATE-list#
1. [] 14 must know chrome dev tools tricks - ] by wes bos - 10:36 - https://www.youtube.com/watch?v=xkzDaKwinA8
2. [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 
3. [me] set breakpoint on console.log error - 
4. [2] console.log - interpolated - 
5. ] ex console.log('my name is %S and i love js','S');
6. ] console.log - interpolated using es6 backticks
7. ]  ex console.log(`my name is ${var} and i love js`);
8. [3] styling console text
9. [] 
4. [] # # - CREATE-list#, irish, paul, chrome/dev tools engineer @ g
1. [] writing functions in console, now detects return char so you can enter multi line inputs ....
2. [] 
3. [] asynch debugging - can set 'inline' breakpoints, which enable effective debugging of asynch code
4. [] authoring edit in devtools, edit in dev tools, save to disk

Details

ID: 7415

NAME: CREATE-article-debug

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

START DATE TIME: 2017-11-11 07:24:11

EST DURATION: 01:00:00

END DATE TIME: 2017-11-11 08:24:11

STATUS: To-Do

PRIORITY: -5

OWNER ID: 1

photos

actions

Agenda Email task SMS task Priorities