feat(live): Configure Firefox devtools to open in fullscreen

[lslezak]

Problem

• The Firefox devtools are displayed at the bottom of the page
• If we need to take a screenshot of the browser console in openQA then some important errors might be hidden (need scrolling to see them)

The original state after pressing F12:

Solution

• Open devtools in a separate window
• By default display the console tab
• Display timestamps in the console, that can help to match the browser log with the backend log

The new state after pressing F12:

[dgdavid]

• If we need to take a screenshot of the browser console in openQA then some important errors might be hidden (need scrolling to see them)

Remember that scroll might appear at any time, any resolution 😉 In this case it depends of how long the trace is. Of course, the situation is better now and there are less chances of missing something.

So, despite this is a nice job for easing testing/debugging process I still betting for an endpoint in the server for recording the console messages, when possible.

[dgdavid]

So, despite this is a nice job for easing testing/debugging process I still betting for an endpoint in the server for recording the console messages, when possible.

But don't get me wrong. Nice work, thanks!

[lslezak]

The problem with console messages is that you cannot reliably catch all messages, you can catch console.log() calls from JavaScript, but you cannot catch the errors reported by the browser itself, like that "Too many calls to Location or History APIs within a short timeframe" error. 😟

So taking the console screenshot will be still important feature.

[dgdavid]

For saving more space, I guess you could even show only errors by disabling others

devtools.webconsole.filter.info	        false	
devtools.webconsole.filter.warn       false   

[lslezak]

We use logging at very few places in the web UI, most of them are errors or warnings already. We can change the filtering later when really needed, for now I'd keep it as it is.