Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Debugging JS

Debugging JS

Presentation of various concepts for improving speed when debugging JS

Avatar for Miguel Jiménez

Miguel Jiménez

November 15, 2012
Tweet

More Decks by Miguel Jiménez

Other Decks in Technology

Transcript

  1. ¿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
  2. 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); }
  3. Stop on errors • Gray () – Never stop when

    an error happens (default) • Blue () – Stop on any error • Purple () – Stop only on uncaught exceptions
  4. 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. }
  5. 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'); }
  6. "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
  7. var __oldTest = test; test = function() { debugger; return

    __oldTest.apply(this, arguments); }; Stop when a method is called load test “test” __oldTest “test” + BP
  8. "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
  9. 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; } }
  10. 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; };
  11. 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