Dynamic Code Analysis for JavaScript

Dynamic Code Analysis for JavaScript

Presented at jQuery Conference 2014 in San Diego: http://events.jquery.org/2014/san-diego/.

These days, publishing a project without a comprehensive test suite is frown upon. However, the tests themselves do not always tell the full story. We need to level up and provide a more confident level of dynamic code testing. In this talk, two types of such analysis will be covered: code coverage and run-time complexity profiling. Code coverage is instrumental in deciding the quality of the existing sets of unit tests. An important aspect of coverage testing, branch coverage, plays an important role in discovering possible latent bugs due to untested code flow. In addition to code coverage, complexity profiling permits selective instrumentation of a particular code block for the purpose of performance analysis. More than just measuring elapsed time, run-time profiling also needs to reveal the algorithmic complexity which can be tracked via this empirical approach.

Additional details: http://ariya.ofilabs.com/2014/02/the-majestic-jquery-conference-san-diego-2014.html.

0284b8950e0f4a57bcc092d4dbb98d97?s=128

Ariya Hidayat

February 12, 2014
Tweet

Transcript

  1. 4.
  2. 8.

    Syntax Parser var answer = 42 keyword equal sign identifier

    number Variable Declaration Identifier Literal Constant Tokenization → Tokens Parsing → Syntax Tree
  3. 9.

    { type: "Program", body: [ { type: "VariableDeclaration", declarations: [

    { type: "VariableDeclarator", id: { type: "Identifier", name: "answer" }, init: { type: "Literal", value: 42, raw: "42" } } ], kind: "var" } ] } Syntax Tree var answer = 42; Terms → ECMAScript 5.1 Specification https://developer.mozilla.org/en-US/docs/SpiderMonkey/Parser_API
  4. 11.
  5. 15.
  6. 16.

    Code Instrumentation var answer = 42; alert(answer); var __cov_l$4m7m$L464yvav5F$qhNA =

    __coverage__['hello.js']; __cov_l$4m7m$L464yvav5F$qhNA.s['1']++; var answer = 42; __cov_l$4m7m$L464yvav5F$qhNA.s['2']++; alert(answer);
  7. 18.

    Branch Coverage function inc(p, q) { if (q == undefined)

    q = 1; return p + q/q; } assert("inc(4) must give 5", inc(4) == 5); http://ariya.ofilabs.com/2012/12/javascript-code-coverage-with-istanbul.html
  8. 20.
  9. 28.

    Timing Prepare the stopwatch Mark the start and the end

    Sampling Periodically check which function is being executed Tracing Track all function calls and exits http://ariya.ofilabs.com/2012/12/javascript-performance-analysis-sampling-tracing-and-timing.html
  10. 29.

    Fast = Enough? Alice Bob Chuck Dan ... Bob Alice

    Dan Chuck ... Sort How’s the speed? 2 ms to sort 10 contacts
  11. 30.

    Array.prototype.swap = function (i, j) { var k = this[i];

    this[i] = this[j]; this[j] = k; } function sort(list) { var items = list.slice(0), swapped = false, p, q; for (p = 1; p < items.length; ++p) { for (q = 0; q < items.length - p; ++q) { if (items[q + 1] < items[q]) { items.swap(q, q + 1); swapped =true; } } if (!swapped) break; } return items; } Bubble Sort ???
  12. 31.

    Run-time Complexity http://ariya.ofilabs.com/2012/01/scalable-web-apps-the-complexity-issue.html Array.prototype.swap = function (i, j) { var

    k = this[i]; this[i] = this[j]; this[j] = k; } Array.prototype.swap = function (i, j) { Log({ name: 'Array.prototype.swap', lineNumber: 1, range: [23, 94] }); var k = this[i]; this[i] = this[j]; this[j] = k; } http://esprima.org/demo/functiontrace.html
  13. 32.
  14. 40.

    Final Words Dynamic code analysis for quality: • Code coverage

    (statement, branch,...) • Function instrumentation Build, write, tweak code analysis tools