Skip to content

Commit 5640990

Browse files
committed
adding demo video and feature list
1 parent 0992613 commit 5640990

File tree

2 files changed

+22
-3
lines changed

2 files changed

+22
-3
lines changed

explainers/JSONViewer/explainer.md

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,36 @@ When navigating to an HTML document, and selecting "view source" you get a colou
1919

2020
We propose to replace tha basic JSON view with a colour-coded, collapsible and expandable one.
2121

22-
![JSON in browser as a colour-coded, collapsible tree](colour-coded.png)
22+
![JSON in browser as a colour-coded, collapsible tree](json-viewer.gif)
2323

24-
We are currently investigating the overall browser performance impact of this, which is why the first implementation will be basic.
24+
We are currently investigating the overall browser performance impact of this, which is why the first implementation is what is shown in the screencast above.
2525

2626
### Goals
2727

2828
As JSON files are data structures and users want to drill down into the data and analyse it in detail. This is a first step in this direction. In subsequent iterations we want to add more functionality like displaying header data and a raw view, saving and copying data and filtering the information.
2929

3030
### Usage
3131

32-
This functionality will trigger automatically when the browser navigates to a JSON file on the web or the user opens a local one.
32+
This functionality will trigger automatically when the browser navigates to a JSON file on the web or the user opens a local one. Once we add more features you will also be able to interact with the JSON data in more detail.
33+
34+
### Feature release plan
35+
36+
**Current:** JSON is being displayed as a collapsible tree with line numbers and colour coding in dark and light themes
37+
38+
Upcoming features in delivery order:
39+
40+
* Get a "slow" warning when the JSON is too big to render and an option to show it as plain text instead
41+
* Get an "invalid" warning when the JSON payload is invalid
42+
* Switch between the expandable tree view and the raw text view
43+
* Copy the JSON payload with a button
44+
* Download the JSON payload with a button
45+
* Search/filter the JSON
46+
* Expand and collapse all the nodes in the document
47+
* Choose to display JSON in table format for array data that can be sorted/filtered
48+
* Large JSON payloads will load the first 500K and then offer to stream the rest
49+
* Choose to inherit themes from DevTools
50+
* Set Raw or Tree display as a default
51+
* Open JSON in Network Console
3352

3453
## Feedback
3554
Have feedback? We want to hear it! *[Issue #87](https://github.com/MicrosoftEdge/DevTools/issues/87)* tracks community feedback on this explainer.

explainers/JSONViewer/json-viewer.gif

1.62 MB
Loading

0 commit comments

Comments
 (0)