|
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