console.diff(...) icon

console.diff(...)

Extension Actions

How to install Open in Chrome Web Store
CRX ID
iefeamoljhdcpigpnpggeiiabpnpgonb
Status
  • Extension status: Featured
Description from extension meta

Compare objects in memory with console.diff(old, new) devtools function

Image from store
console.diff(...)
Description from store

An extension for developers that enhances the console API by incorporating the ability to compare objects and adds a JSDiff tab (parallel to Elements, Network panels) within your dev-tools for viewing the results.

Motivation:
Track object mutations during runtime and/or while debugging with intention to find expected or unexpected changes.

Note: this extension utilises content scripts, so after immediate installation or an update, make sure to refresh the inspected tab before using its functionality.

API:
// compare left and right arguments
console.diff(
{ a: 1, b: 1, c: 3 },
{ a: 1, b: 2, d: 3 }
);

// with a single argument behaves the same as `console.diffPush`
console.diff(Date.now());

// shifts sides - previous right side becomes left, new value becomes right
console.diffPush(Date.now());

// update left side only
console.diffLeft(Date.now());

// update right side only
console.diffRight(Date.now());

Read more at: https://github.com/zendive/jsdiff

Latest reviews

Peter Tandler
When use have complex JS objects and need to know what changed, this is so extremely helpful! Thanks for sharing! Save me already hours.
Peter Tandler
When use have complex JS objects and need to know what changed, this is so extremely helpful! Thanks for sharing! Save me already hours.
Isaac Drew
Incredibly useful. I don't think much maintenance will be required for an extension like this, but if there is I hope they'll keep it up :)
Isaac Drew
Incredibly useful. I don't think much maintenance will be required for an extension like this, but if there is I hope they'll keep it up :)
Anonymous
Tried it and I already use it on a regular basis. I hope the developer will keep maintaining it.