Network tab freezes VSCode when displaying base64 image encoded strings

[TiffApps]

Hi!

I was checking out the network tab to inspect some request/response objects (just opening the fields here and there to read inside), when at some point, VSCode froze, prompting me to Re-open, close, or wait.
I clicked wait the first time, then re-open the 2nd time.
It closed the window, opened the small "Updating VSCode window" for 10sec, before not re-opening VSCode after 2min.

I clicked on the VSCode icon to launch it, it worked right away, I waited a minute so everything can get initialized, but there was a notification about the terminal not closing correctly and something like "pty needs to restart". I clicked on restart, it wrote "restarting terminal etc" in blue in my terminal, and then the notification popped up again, so I repeated the operation 3 times before giving up and going into Terminal > Kill Terminal > New Terminal, but it immediately closes again as soon as it starts.

On the devtools side, I don't see the "Dart: Open the Network DevTools tab" anymore at all: it just disappeared from my IDE. Here is what I see:

("Dart: Open DevTools" being the one in the web browser, not in VSCode)

Further VSCode restarts didn't help, and I haven't tried restarting my PC yet in case it erases some internal VSCode logs that could be useful to know more about this issue.

As of right now, it means:

• I can't use VSCode's terminal anymore
• I can't use built-in DevTools anymore
  Of course I expect a PC restart to fix both issues, but I'll just wait for your answer before trying.

Let me know if you need more details on any step, I'll gladly provide everything you need!

Versions

OS: Windows 10 22H2
Flutter: 3.10.5
Dart: 3.0.5
DevTools: 2.23.1
VSCode: 1.79.2

[DanTup]

On the devtools side, I don't see the "Dart: Open the Network DevTools tab" anymore at all: it just disappeared from my IDE. Here is what I see:

The commands to open specific pages only appear when you have an active debug session (because they can only be loaded with a VM Service connection). You'll only see the generic "Open DevTools" command if you don't have a session. It's not clear if you had one open or not?

I can't use VSCode's terminal anymore

There's not a lot of interaction between VS Code extensions and the terminal, so if this isn't working (and persists after a reboot) there might be something wrong with VS Code (perhaps something got corrupt during the update because it didn't close cleanly?). Are there any errors listed if you click Help -> Toggle Developer Tools and click on the Console tab?

There are some VS Code commands to get logs:

• Developer: Open Logs Folder
• Developer: Open Extension Logs Folder
• Dart: Open Extension Log

I don't know of any of them will contain anything useful though. If not, if you're able to reproduce this at all it might be useful to run VS Code with the crash reporter directory set to see whether it captures anything that we could report to VS Code (in theory, extensions should not be able to crash VS Code, so even if DevTools we're triggering it, there might be an underlying VS Code bug).

[TiffApps]

The commands to open specific pages only appear when you have an active debug session (because they can only be loaded with a VM Service connection). You'll only see the generic "Open DevTools" command if you don't have a session. It's not clear if you had one open or not?

Ah, I never noticed it needed an active debug session, my bad. I just started one, it opened a new terminal automatically (for the debug session), and I was able to open a working network tab.

Are there any errors listed if you click Help -> Toggle Developer Tools and click on the Console tab?

However, I was able to reproduce the issue directly when clicking on > variables i the Request tab (I haven't restarted my PC yet):

On further restarts, I could not even open the network tab anymore, getting this error:

[TiffApps]

Additional informations:

• It behaves exactly the same if I use Flutter DevTools in my browser (Chrome)
  
• There is a base64 image (205.52KB for the string, which is a bit more than 4MB for the original image itself if you wanna test it yourself) in my > variables, which may be the cause of the issue.
• Here is a minimal code reproduction:

import 'dart:convert';
import 'dart:developer';
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:http/http.dart' as http;

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Network tab bug reproduction',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  HomePageState createState() => HomePageState();
}

class HomePageState extends State<HomePage> {
  File? _image;

  Future<void> _pickImage(ImageSource source) async {
    final pickedImage = await ImagePicker().pickImage(source: source);
    if (pickedImage != null) {
      setState(() {
        _image = File(pickedImage.path);
      });
    }
  }

  Future<void> _uploadImage() async {
    if (_image == null) return;

    final bytes = await _image!.readAsBytes();
    final base64Image = base64Encode(bytes);

    // Produces a 404, but we don't really care for this issue
    final url = Uri.parse('https://example.com/upload');
    final response = await http.post(
      url,
      body: {'image': base64Image},
    );

    if (response.statusCode == 200) {
      log('Image uploaded');
    } else {
      log('Upload failed');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Network tab bug reproduction'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            if (_image != null) Image.file(_image!),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () => _pickImage(ImageSource.gallery),
              child: const Text('Select Image'),
            ),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: _uploadImage,
              child: const Text('Upload Image'),
            ),
          ],
        ),
      ),
    );
  }
}

[polina-c]

@CoderDake