Debugging JS

Presentation of various concepts for improving speed when debugging JS

Transcript

2. ¿Why not using Chrome Devtools? • Firefox / Firebug • “It is what I know” • “Internal apps work with Firefox” ¿Why should we use Chrome Devtools? • Great ability to stop where it is needed • Integrated with V8 (or with SquirrelFish) • Multiple implementations
3. The browser
11. DEBUGGING
12. Logging information • Console object – log – warn – error
14. Logging information • Console object – log – warn – error • It does not exist if there is not a debugger! – But only sometimes… "use strict"; function test(n) { var dbl = 2 * n; console.log('Double', dbl); }
15. “debugger”
22. Breakpoints
28. Stop on errors
30. Stop on errors • Gray () – Never stop when an error happens (default) • Blue () – Stop on any error • Purple () – Stop only on uncaught exceptions
31. Stop on errors function forEach(list, callback) { var length = list.length; var i; if (typeof callback !== 'function') { throw new IteratorError('Provide a valid callback'); } for (i = 0; i < length; i++) { callback(list[i]); } } try { forEach([1, 2, 3], null); } catch (err) { //Do nothing. }
32. Stop on errors function forEach(list, callback) { var length = list.length; var i; if (typeof callback !== 'function') { throw new IteratorError('Provide a valid callback'); } for (i = 0; i < length; i++) { callback(list[i]); } } function iterate() { forEach([1, 2, 3], null); } try { iterate(); } catch (err) { throw new CoreError('Unexpected error'); }
33. Shortcut keys F10 F12 F9 F8 F7 F11 ⌂ (shift)      
34. JS BREAKPOINTS
35. "use strict"; function load() { test(); } function test() { var a = 1; var b = 2; debugger; a = b; } document.body.onload = load; A bit of code… load test
36. var __oldTest = test; test = function() { debugger; return __oldTest.apply(this, arguments); }; Stop when a method is called load test “test” __oldTest “test” + BP
40. "use strict"; object.__defineSetter__('property', function(newValue) { debugger; }); Stop when a value is called
41. "use strict"; function monitor(object, property) { var value = object[property]; object.__defineGetter__(property, function() { return value; }); object.__defineSetter__(property, function(newValue) { debugger; value = newValue; }); } Stop when a value is called
46. function advancedThing() { var jobId = 1; var i; for (i = 0; i < 10; i++) { if (i === 4) { jobId = 2; } } return jobId; } function advancedThing() { var scope = {jobId: 1}; var i; monitor(scope, 'jobId'); with (scope) { for (i = 0; i < 10; i++) { if (i === 4) { jobId = 2; } } return jobId; } }
47. Arrays are a particular case…
54. Quick summary • Stop when we reach a line of code – “debugger;” – ‌ BP o conditional BP • Stop when a method is called – We assign a new method (with debugger inside) – MyObject.method = function() { debugger; }; • Stop when value of a property changes – We use “__defineSetter__” – If it is an array, we stop when we call “push” (see above) – list.push = function() { debugger; };
55. DOM BREAKPOINTS
59. The case of “value”, “src” and others
62. The case of “value”, “src” and others element.setAttribute('value', myValue); element.value = myValue;
66. Event breakpoints
70. Console helps us with DOM
77. Quick summary • Breakpoints in DOM operations – Attributes: modify classes, disable, (remember “value”, “src”…) – Modifications: rendering a template, HTML from server – Deletion: closing a tab • Event breakpoints – Valid for native JS or Dojo – Useless for jQuery • Console – $0 , $1 , $2 , $3 … – getEventListeners
78. XHR BREAKPOINTS
82. jQuery
87. Net panel