|
1 | | - |
| 1 | + [available at chrome web-store](https://chrome.google.com/webstore/detail/jsdiff-devtool/iefeamoljhdcpigpnpggeiiabpnpgonb) |
2 | 2 | --- |
3 | | -Chrome devtools extension |
4 | | -intended to display result of in-memory object comparisons with |
5 | | -the help of dedicated commands invoked via console. |
| 3 | +Chrome devtools extension intended to display result of deep in-memory object |
| 4 | +comparisons with the help of dedicated console commands. |
6 | 5 |
|
7 | | -[find at chrome web-store](https://chrome.google.com/webstore/detail/jsdiff-devtool/iefeamoljhdcpigpnpggeiiabpnpgonb) |
8 | 6 |
|
9 | | -Example |
10 | | -=== |
| 7 | +### API |
11 | 8 | ```javascript |
12 | | -console.diff(left, right); |
13 | | -console.diffLeft(left); |
14 | | -console.diffRight(right); |
15 | | -console.diffPush(next); // private case of console.diff with single argument |
| 9 | +console.diff(left, right); // compare left and right |
| 10 | +console.diff(next); // shorthand of diffPush while single argumented |
| 11 | +console.diffLeft(left); // update object on the left side only |
| 12 | +console.diffRight(right); // update object on the right side only |
| 13 | +console.diffPush(next); // shifts sides, right becomes left, next becomes right |
16 | 14 | ``` |
17 | | - |
18 | 15 |
|
19 | | -Usage basics |
20 | | -=== |
21 | | -Left side for old state, right side for new. |
22 | | -To track changes of the same object in timed manner you can push it with `diffPush` command, |
23 | | -that will shift objects from right to left, showing differences with previous push state. |
24 | 16 |
|
25 | | -Based on |
26 | | -=== |
| 17 | +### Usage basics |
| 18 | +Historicly, left side represents the old state and right side the new state. |
| 19 | +Things that are present on the left side but missing on the right side are colour-coded as red (old). |
| 20 | +Things that are missing on the left side but present on the right side are colour-coded as green (new). |
| 21 | +To track changes of the same variable in timed manner you can push it with `diffPush` command, |
| 22 | +that will shift objects from right to left, showing differences with previous push state. |
| 23 | +You can compare objects from different tabs (sites). |
| 24 | + |
| 25 | + |
| 26 | +### Screenshot |
| 27 | + |
| 28 | + |
| 29 | + |
| 30 | +### Gotcha |
| 31 | +Comparred objects shouldn't contain functions or self-recurrent references, like DOM elements or view instances have. |
| 32 | + |
| 33 | + |
| 34 | +### Based on |
27 | 35 | - [jsondiffpatch](https://github.com/benjamine/jsondiffpatch) by Benjamín Eidelman |
28 | 36 | - [vuejs](https://github.com/vuejs) by Evan You |
0 commit comments