Enhance Console logs

[maciekstosio]

This PR aims to improve the debugging experience by making it similar to Chrome DevTools.

It improves the preview, formatting and truncating of console logs and splits large arrays into smaller changes, where chunks are fetched on expand - similarly as vscode-js-debug does. The more detailed previews are generated based on preview property from the debugger, so it may not work on older RN versions.

The main idea was not to reinvent the wheel but to reuse as much of https://github.com/microsoft/vscode-js-debug as possible. Thus we forked it with small patch software-mansion-labs/vscode-js-debug@a579416 that allows us to build it - otherwise the TS on our side failed. vscode-js-debug sits in our repo as a git submodule and no additional steps should be necessary (preinstall script should take care of pulling it, installing and building).

Before	After

Before	After

How Has This Been Tested:

Update printLogs method with:

function printLogs() {
    const string = 'string';
    const object = { key: 'value', key2: 'value2' };
    const set = new Set([1, 2, 3, 3]);
    const array1000 = new Array(1000).fill(0).map((_, i) => i);
    const array101 = new Array(101).fill(0).map((_, i) => array1000);
    const int = 1;
    const float = 1.1;
    const func = function() {};
    const anonymousFunc = () => {};

    console.log(string, array1000, array101, object, set,
      int,
      float,
      func,
      anonymousFunc);
}

Tested on react-native-76, react-native-73.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
radon-ide	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 17, 2024 10:12pm

[kmagiera]

Left some comments inline.

What I don't see how this PR addresses which was one of the main motivators for doing this is how do we deal with large strings. Is it entirely handled by the imported methods from vscode-js-debug?

[kmagiera]

maybe this should be an else if given we exclude "indexed" here. Also what happens when "named" is used as this doesn't seem to be handled at all?

[maciekstosio]

Changed in: 5c1db41

[kmagiera]

Looks good!