CRX id
iefeamoljhdcpigpnpggeiiabpnpgonb
iefeamoljhdcpigpnpggeiiabpnpgonb
Description from extension meta
Deep compare complex in-memory objects inside browser devtools panel with console.diff command.
Image from store
Description from store
API:
console.diff(left, right); // compare left and right
console.diff(next); // shorthand of diffPush while single argumented
console.diffLeft(left); // update object on the left side only
console.diffRight(right); // update object on the right side only
console.diffPush(next); // shifts sides, right becomes left, next becomes right
Usage basics:
Historicly, 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` command,
that will shift objects from right to left, showing differences with previous push state.
You can compare objects from different tabs (sites).
Gotcha:
Comparred objects shouldn't contain functions or self-recurrent references, like DOM elements or view instances have.
Latest reviews
- (2023-06-20) 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.
- (2021-08-27) 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 :)
- (2018-04-30) Tried it and I already use it on a regular basis. I hope the developer will keep maintaining it.