Web Inspector: Make console faster, only render last N messages in the DOM

• Component: Web Inspector
• Status: ASSIGNED ---

[Nikita Vasilyev]

Having thousands of messages in the console can make it slow. Display only last 500 messages to reduce amount of elements in the DOM and thus reduce memory consumption.

Either add "Show previous 100 messages" button or just load them when we scroll to the top edge of the console.

I’m not sure about the numbers, I need to do some stress testing first.

[Radar WebKit Bug Importer]

<rdar://problem/19950261>

[Nikita Vasilyev]

While working on code hotness visualizer, I've been logging objects every time I get data from the backend, approximately every second. Running inspector over 10 minutes makes the whole UI interface unbearably slow.

The following code shouldn't drastically affect Web Inspector performance after running for 10 minutes:

setInterval(function() {
    console.log({x: Math.random()})
}, 1000);

[Nikita Vasilyev]

See also:
<rdar://problem/23527135>

[Nikita Vasilyev]

I’d prefer to have a generic solution that would
also work for big data grids (e.g. in Timelines).

[Nikita Vasilyev]

As far as I can tell, we store console messages data only in the DOM.
We don't have an array of WebInspector.ConsoleMessage instances in
WebInspector.JavaScriptLogViewController or anywhere else.

My first step would be to store WebInspector.ConsoleMessage instances
in WebInspector.JavaScriptLogViewController, so I can render them later
when needed.

[Nikita Vasilyev]

The first step I'd like to tackle is to render console
messages only when the split console is visible or the console
tab is active.

AFAIK, there is currently no event like "console-show".
The closest I've found so far is
WebInspector.QuickConsole.Event.DidResize event and
WebInspector.consoleContentView.visible getter.

[Timothy Hatcher]

(In reply to comment #6)
> The first step I'd like to tackle is to render console
> messages only when the split console is visible or the console
> tab is active.
> 
> AFAIK, there is currently no event like "console-show".
> The closest I've found so far is
> WebInspector.QuickConsole.Event.DidResize event and
> WebInspector.consoleContentView.visible getter.

LogContentView  would get hidden() and shown() called on them. Implementing those could call other code, like on JavaScriptLogViewController.