You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
- support new types of serialization: `URL`, `RegExp` ( #28 )
- fix#29
- spread usage of catalogs between Symbol, DOM and the rest, to reduce
"noise" in comparison results
---------
Signed-off-by: 🕷️ <[email protected]>
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.
3
+
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.
4
4
5
5
- Available in Chrome Web Store as [console.diff()](https://chromewebstore.google.com/detail/consolediff/iefeamoljhdcpigpnpggeiiabpnpgonb)
6
6
- Available in Firefox Add-ons as [jsdiff.diff()](https://addons.mozilla.org/addon/jsdiff-diff/)
7
7
8
8
<details>
9
-
<summary> <strong>Examples</strong> </summary>
9
+
<summary> <strong>Screenshots</strong> </summary>
10
10
11
11
- Comparing two objects
12
12
13
13
14
-
- Tracking changes in localStorage (unchanged are hidden)
14
+
- Tracking changes in `localStorage` (unchanged are hidden)
15
15
16
16
17
17
</details>
18
-
<details>
19
-
<summary> <strong>How it works</strong> </summary>
20
18
21
-
- Chrome mv3
22
-
23
-
- Firefox
24
-
25
-
26
-
</details>
19
+
### Motivation
27
20
28
-
### Based on
29
-
30
-
-[jsondiffpatch](https://github.com/benjamine/jsondiffpatch) by Benjamín Eidelman
31
-
-[vuejs](https://github.com/vuejs) by Evan You
21
+
- Track object mutations during runtime and/or while debugging with intention to find expected or unexpected changes.
32
22
33
23
### Features
34
24
35
-
-Symple user interface:
25
+
-User interface:
36
26
37
-
- Button to hide/show unchanged properties.
38
-
- Button to copy changed properties in format of `jsondiffpatch` Delta object.
39
-
- Button to clear current result.
40
-
- Search input to highlight patterns
27
+
- Hide / show unchanged properties.
28
+
- Copy changed properties in format of `jsondiffpatch` Delta object.
29
+
- Clear current result.
30
+
- Search input to highlight patterns.
31
+
- If search query contains at least one upper-case letter - the search will be case-sensitive.
41
32
- Indicator of the last update time.
42
33
- Indicator of a fatal error (out of storage memory).
43
-
- Devtools light/dark colour scheme support.
44
-
45
-
- Compare objects between multiple [sub]domains, chrome tabs, or single page reloads.
46
-
47
-
- JSDiff devtools panel reflects current state of comparison, regardless the tab[s] it was opened from.
48
-
49
-
- Internal search inside comparison results
34
+
- DevTools light/dark color scheme support.
50
35
51
-
- If search query contains at least one upper-case letter - the search will be case-sensitive.
36
+
- Compare objects between multiple [sub]domains, Chrome tabs, or single page reloads.
52
37
53
-
- Using `console.diff` functions from within online code editors like: [codesandbox.io](https://codesandbox.io), [coderpad.io](https://coderpad.io), [flems.io](https://flems.io), [codepen.io](https://codepen.io), [jsfiddle.net](https://jsfiddle.net).
38
+
-`JSDiff` DevTools panel reflects current state of comparison, regardless the tab[s] it was opened from.
54
39
55
-
-Functions are included in comparison result in order to detect possible alterations, in form of a string combined from a function name (if present) and a SHA-256 hash of a `function.toString()`body. Native functions are shown as `ƒ⟪native⟫`.
40
+
-Fail-safe serialization of objects having security issues while accessing their properties or objects having `toJSON()` function; when instead of serialization of all object properties, - only `toJSON()`return value is serialized, like `JSON.strigify()` does.
56
41
57
-
-Some DOM objects like Document or Element are not worth to be shown entirely, since that is not the purpose of this extension. So if they are present anywhere, they are serialized as `0x####: ⟪unserializable⟫`.
42
+
-Can be used from within online code editors like: [codesandbox.io](https://codesandbox.io), [coderpad.io](https://coderpad.io), [flems.io](https://flems.io), [codepen.io](https://codepen.io), [jsfiddle.net](https://jsfiddle.net), [mdn playground](https://developer.mozilla.org/play).
58
43
59
-
- Object, Array, Map, Set - serialized only once and the rest of their ocurrances are mentioned with unique reference like: `0x####: {♻️}`, `0x####: [♻️]`, `0x####: Map{♻️}`, `0x####: Set[♻️]` respectivly.
44
+
####Limitations
60
45
61
-
- Map keys, unless they are primitive types, serialized by their pseudo ids.
46
+
- Map keys like `0` and `'0'` would be merged due to `Map to Object` conversion.
62
47
63
-
-Symbols serialized with his pseudo id like: `0x####: Symbol(name)`.
48
+
-While paused in debug mode, `JSDiff` panel won't reflect the result until runtime is resumed (see [#10](https://github.com/zendive/jsdiff/issues/10)).
64
49
65
-
- Serialization of numerics like `+/-Infinity`, `NaN`, `BigInt`, or `undefined` serialized like: `Number⟪Infinity⟫`, `Number⟪NaN⟫`, `BigInt⟪#⟫`, `⟪undefined⟫` respectivly.
66
-
67
-
- Failsafe serialization of objects having security issues while accessing their properties.
68
-
69
-
- Failsefe serialization of objects having `toJSON()` function (when instead of serialization of all object properties, - only toJSON() return value is serialized, similar to the way native `JSON.strigify()` works).
70
-
71
-
### Legend
72
-
73
-
- Pseudo id, assigned to non-primitive data types, used in order to detect reference recurrences and, in case of Symbols - symbol uniqueness. Id for an object shown in the output only if it seen more than once. It being assigned in the scope of serialization of a high level argument instance, while comparing left or right side; that means if some object, having id 0x0001 on the left side, is not guarantied to have same id on the right side.
74
-
75
-
### Limitations
76
-
77
-
- While paused in debug mode, JSDiff panel won't reflect the result until runtime is resumed (see [#10][i10]).
- Things that are missing on the left side but present on the right side are colour-coded as green (new).
121
+
<sup>1</sup> Functions included in comparison result in order to detect possible alterations, in form of a string combined from a function name (if present) and a hash of a `function.toString()` body.
139
122
140
-
- 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.
123
+
<sup>2</sup> DOM element serialized by pseudo `id` and `nodeName`.
141
124
142
-
### How to build
125
+
<sup>3</sup> Notation `{}` denotes pseudo `id` from a Set of unique instances, which is assigned during serialization of compared sides and remains inside internal `WeakMap` lookup catalog until its garbage collected or page is reloaded.
143
126
144
-
Requires
127
+
<sup>4</sup> Notation `[]` denotes pseudo `id` from a [Multiset](https://en.wikipedia.org/wiki/Multiset) of recurring instances, which is assigned in the scope of serialization of a high level argument instance, while comparing left or right side; that means - if some object, having `id` of `[0001]` on the left side, is not guarantied to have same `id` on the right side.
145
128
146
-
- Linux
147
-
- node 22.11 (LTS)
148
-
149
-
```sh
150
-
make install # to install dependencies
151
-
make all # build for prod and make extension.${browser}.zip
152
-
make tune2chrome # or tune2firefox for relevant manifest.json file
153
-
make dev # local development
154
-
```
129
+
<sup>5</sup> `Map` key, unless it's a primitive type, serialized by his pseudo `id`.
155
130
156
131
### Protection
157
132
158
133
- How to protect your site from this extension:
159
-
- Well, tests on chrome show that even `Content-Security-Policy: default-src 'none';` header won't prevent injection of extension content-scripts...
134
+
135
+
- Tests in Chrome show that even `Content-Security-Policy: default-src 'none';` header won't prevent injection of extension content-scripts...
136
+
160
137
- Avoid assigning to `window` or `globalThis` any application object.
161
138
See also [accidental global variables and memory leaks](https://www.tutorialspoint.com/explain-in-detail-about-memory-leaks-in-javascript).
139
+
162
140
- In general, you can incapacitate console functions:
141
+
163
142
```js
164
143
for (constpropinconsole) {
165
144
if (typeofconsole[prop] ==='function'&& prop !=='error') {
166
145
console[prop] =functionnoop() {};
167
146
}
168
147
}
169
148
```
149
+
150
+
### Build instructions
151
+
152
+
- Linux
153
+
- node 22.14 (LTS)
154
+
155
+
```sh
156
+
make install # install dependencies
157
+
make all # build for prod and make extension.${browser}.zip
158
+
make tune2chrome # or tune2firefox for relevant manifest.json file
159
+
make dev # local development
160
+
```
161
+
162
+
#### Based on
163
+
164
+
-[jsondiffpatch](https://github.com/benjamine/jsondiffpatch) by Benjamín Eidelman
165
+
-[vuejs](https://github.com/vuejs) by Evan You
166
+
167
+
<details>
168
+
<summary> <strong>Communication schemes between Content-script and DevTools panel</strong> </summary>
0 commit comments