Network tool is significantly less efficient to use

[HaydenHMSD]

This is related to viewing network calls on mobile.

The problem:

1. The right panel no longer refreshes when clicking on a network call on the left panel unless clicking on a fake call.
2. The response is now hidden until multiple disclosure arrows are clicked

Steps to Reproduce:

1. Start the app
2. Open DevTools
3. Goto Networking
4. Trigger some networking calls that result in JSON responses
5. Select a networking call in the left panel
6. Observe: The right panel shows the details of the call
7. Observe: the JSON response is no longer viewable unless disclosure arrows are clicked
8. Observe: the disclosure arrows require a significant degree of accuracy and to click and you can't just click on the words next to it
9. Click on another network call in the left panel
10. Observe: the right panel shows the details of the previous call
11. Click on a fake call
12. Click on a real call
13. Observe: the right panel now shows the details of an old call

Expected:
Click on network call
Observe right panel shows the details of the call you just clicked on
We don't have to click disclosure arrows to view the JSON response.

Previously the number of clicks to switch between two calls was one.
Now the number of clicks to switch between two calls is significantly more, and you have to stop and pause more often to get to a second call.

---

DevTools version: 2.15.0
Connected Device:
CPU / OS: arm (32 bit) android
Dart Version: 2.18.1
Flutter Version: 3.3.2 / stable
Framework / Engine: e3c29ec00c / a4ff2c53d8
Connected app type: Flutter native (debug build)

[kenzieschmoll]

@bkonyi

[quyenvsp]

It all because new JsonViewer not helpful at any point.

For people who reading this issue if want Network tab helpful then I have edited get old JsonFormatted back here

You can found Edited file and Guide change flutter devtools at Google Drive

version 2.20.1 for flutter > 3.7
lower recommend 2.18

Note: it is not official change, use at your own risk.

Hope they will do something about it soon.

[kenzieschmoll]

The state management issues you are describing where clicking on a new request shows content from an old request have been resolved. If you try DevTools from the Flutter beta or master channels, you will see much better reliability for the network profiler.

Regarding the Json viewer, if the json viewer was expanded a couple levels by default, or if we provided an "expand all" button, would this provide the experience you are looking for?

[quyenvsp]

I understand it's getting better, but it's not quite as good as the old JsonFormatted, there is also problem with select/copy ability, "expand all" is needed.

My friends and I both love the old simple JsonFormatted. But anyway, the improvements are only in the new versions, are you planning to release Devtools patches for older Flutter 3-3.7 versions?

[bkonyi]

Since we've started shipping DevTools with the Dart SDK, we make more assumptions about the capabilities of the target Dart VM's service protocol which makes it hard to guarantee that a newer version of DevTools will be backwards compatible with an older version of the Dart VM. If you want to use a newer DevTools with an older Dart/Flutter most features will work properly, but we can't make any guarantees.

Also, if you feel there's missing functionality that you're comfortable implementing, we're always happy to review PRs from the community :-)

[HaydenHMSD]

I hope this helps shape things:

In terms of copying the response, it's extremely difficult to copy part of the response right now. If you try to select a field name and field value together you can't, as they appear in two different columns.

In the proxy app Charles you can select a row and pushing cmd+c/ctrl+c will copy the field name and field value.

I have to copy the whole response with the copy button (thanks for this!) and then paste it into a JSON Beautifier to understand what I'm looking at, or copy part of the response.

I think at the very least we need an option to view the response in different ways like we can in a JSON Beautifier. So we can view it as the tree that is currently shown, or as text as it used to be.

[kenzieschmoll]

Between the work done in #5816 (adding an option to view a response as JSON) and #6020 (which improves text selection for the shared widget that we use in the expandable / collapsible tree viewer), will this issue be resolved?

[HaydenHMSD]

Between the work done in #5816 (adding an option to view a response as JSON) and #6020 (which improves text selection for the shared widget that we use in the expandable / collapsible tree viewer), will this issue be resolved?

Yes. I would call it resolved with that work done! :D

[quyenvsp]

New devtools 2.28.2 in latest Flutter 3.16 nothing helpful with many bugs. JSON View sometime can not select text after switch Auto/Json/Text, 100% can not select long text which exceeds the width but does not break the line.
And Text view for what? Can not select text.
1 year and nothing can replace old JsonFormatted.

[CoderDake]

I've improved the Json experience in #7596 which should help add selection with normal text view, and also some copy buttons to help make navigating the responses more convenient.

If you still run into more issues with navigation please feel free to open up a new issue and tag me :)