console.diff()

Chrome devtools extension intended to display result of deep in-memory object comparisons with the help of dedicated console commands.

Based on

• jsondiffpatch by Benjamín Eidelman
• vuejs by Evan You

Features

• compare objects from multiple tabs and/or between page reloads
• function code included in comparison result in form of a string, may help to see if it was altered
• document, dom-elements and other non-serializable objects are filtered-out from the results
• self recurring references displayed only once, the rest of occurrences are filtered-out

Limitations and workarounds

• some instances of objects may cause exception during preparations for comparison
  • try to narrow compared contexts
  • if it's some Browser API that causes an exception and not a framework, consider opening an issue, so it will be possible to solve is on a permanent basis
• while paused in debug mode, JSDiff panel won't reflect the result until runtime is resumed (#10)

API

• console.diff(left, right) - compare left and right arguments

console.diff({ a: 1, b: 1, c: 3 }, { a: 1, b: 2, d: 3 });

• console.diffPush(next) - shifts sides, right becomes left, next becomes right

console.diffPush(Date.now());

• console.diff(next) - shorthand for diffPush

console.diff(Date.now());

• console.diffLeft(left) - update the old value

console.diffLeft(Date.now());

• console.diffRight(right) - update the new value

console.diffRight(Date.now());

Usage basics

Historically, left side represents the old state and right side the new state.

• Things that are present on the left side but missing on the right side are colour-coded as red (old).
• Things that are missing on the left side but present on the right side are colour-coded as green (new).

To track changes of the same variable in timed manner you can push it with diffPush or diff with a single argument, that will shift objects from right to left, showing differences with previous push state.

How it works

• jsdiff-devtools.js registers devtools panel
  • injects console.diff commands into inspected window's console interface
    • each function stringifies arguments and sends them via postMessage to jsdiff-proxy.js
  • injects jsdiff-proxy.js that listens on window message and sends it further to chrome runtime.
• when jsdiff-panel.js is visible in devtools, it reflects result of last invocation and listens for future messages

Screenshot