Is there an option to switch between the new JsonViewer format and the old JSON format in Network response?

[xieenming]

In Flutter DevTools 2.15.0 , it adds a new feature, "a Json viewer with syntax highlighting for network responses", see

https://docs.flutter.dev/development/tools/devtools/release-notes/release-notes-2.15.0 and https://github.com/flutter/devtools/pull/4167

But it seems that it does not have an option to switch between the new JsonViewer format and the old JSON format in Network response.

When I say old JSON format, it means something like below :

{
    "err": {
        "ec": 0,
        "em": "ok",
        "dm": "ok"
    },
    "ret": {
        "has_prev": false,
        "has_next": false,
        "limit": 100,
        "offset": 0,
        "data": [
            {
                "id": "box_1001",
                "services": []
            },
        ]
    }
}

There is a button on the right to copy the content of Network response, when I paste the content into some Editor (e.g. VS Code), it will be JSON format.

I think it is not convenient, because the new JsonViewer format I have to expand manually each level to view all the data. Sometimes I want to view the whole JSON format like the old JSON format does.

Why does Flutter DevTools team provide a new format without letting user to switch between new format and old format ? Someone maybe still loves the old format.

Thanks a lot!

[jacob314]

Fyi @bkonyi

[bkonyi]

I think the solution here is to add Expand/Collapse All buttons to JsonViewer and maybe default to expanding the JSON tree. Would that address your main concern @xieenming?

[kenzieschmoll]

+1 to adding expand all / collapse all to this viewer.

[xieenming]

@bkonyi @kenzieschmoll @jacob314

Thanks a lot for your quick reply.

It is good to have "Expand/Collapse All buttons to JsonViewer".

But if you could also add a button or something to be able to switch between the new JsonViewer format and the old JSON format? Because currently, if I want to view the old JSON format content, I have to click the "Copy" button at the top-right corner, and paste the content to an editor (for example, VS Code) and format the code to view the nice JSON format content. It is not convenient.

Thank you very much.

[kenzieschmoll]

Does the work being done here address your concerns? https://github.com/flutter/devtools/pull/5816

[xieenming]

DevTools version 2.20.1 does not have the feature. Do I have to update my Flutter version to latest to see the feature ? @kenzieschmoll

Thanks a lot.

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.7.5, on Ubuntu 20.04.6 LTS 5.15.0-72-generic, locale en_US.UTF-8)
Checking Android licenses is taking an unexpectedly long time...[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
[✓] Chrome - develop for the web
[✓] Linux toolchain - develop for Linux desktop
[✓] Android Studio (version 2022.2)
[✓] IntelliJ IDEA Community Edition (version 2022.1)
[✓] IntelliJ IDEA Community Edition (version 2022.2)
[✓] VS Code (version 1.78.2)
[✓] Connected device (4 available)
[✓] HTTP Host Availability

• No issues found!

[kenzieschmoll]

The work in https://github.com/flutter/devtools/pull/5816 is still in progress, but I was asking if you could take a look and see if that work would address the concerns you raised in this issue. The PR description has an explanation and screenshots.

[xieenming]

@kenzieschmoll OK. Thank you. I feel that the work in #5816 could address the concerns. Thanks a lot.