question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Remove "┏ Electron -------------------" console borders

See original GitHub issue

So a normal console.log() takes up 6 lines (including the blank one):

┏ Electron -------------------

  // output here

┗ ----------------------------

I really, really don’t want this! It makes it impossible to do your own debugging code.

Can it be disabled, or can this output be aliased to console.trace() or some other utility function?

I just want to be in control of my own logging, thanks.

Issue Analytics

  • State:open
  • Created 5 years ago
  • Comments:15

github_iconTop GitHub Comments

3reactions
bdsohacommented, Jan 1, 2019

@davestewart I am very interested because I feel the current log is takes up a lot of screen real-estate.

2reactions
davestewartcommented, Jan 7, 2019

@bdsoha - that looks really nice! I got inspired and expanded on yours.

I added the following functionality:

  • the module now exports a factory function, so you can create multiple loggers
  • each logger has name, fg and bg colors for “tags” (see next line)
  • the log output function renders visually-obvious “tags” when a different logger logs
  • after a tag, the logger outputs as normal, until the other logger has its turn (and so on)
  • logging functions can take multiple args
  • multiline output is indented by 4 spaces
  • new trace() method which inspects objects using util.inspect

This is what it looks like:

image

Here’s the above screenshot in code:

const logger = require('../../../src/common/utils/logger')
const chalk = require('chalk')

const ren = logger('Renderer', 'red', 'white')
const main = logger('Main', 'green', 'black')
const special = logger('Special', null, '#1791ff')

main('this is a normal log')
main('note that loggers output tags, indicating what is currently logging')

main.success('this is success')
main.info('this is info')
main.warn('this is a warning')
main.error('this is an error')

ren('this is a new logger!')
ren('it made a new tag')

main('this is the old logger again')

const values = ['Note that loggers', 'will log multiple', 'arguments to new lines']
main(...values)

main(`Multiline output
is output as expected
but also indented
`)

main('the main log function also prints objects:')
const obj = { a: 1, b: 2, c: 3 }
main({ obj, chalk })

main.trace('you can also trace with a label', obj)
main('or without:')
main.trace(obj)

special('this is now a new logger!')
special('it has custom hex colors')
special.trace({ yay: 'yay!' })

What does everyone think? (I can post the code of course)

@SimulatedGREG - this could certainly work as the default logger; you could have 3 loggers:

  • Electron - setup, build, etc
  • Main - the main process
  • Renderer - the renderer process

@gabrielstuff - yeah, this is obviously common in other languages too.

Do you need a dedicated log viewer for these?

Read more comments on GitHub >

github_iconTop Results From Across the Web

How can I customize Electron border in specific event?
Create a border component inside your renderer. ... And set this border color as green or remove based on the event. Here is...
Read more >
A file-system browser component for Electron/Vue.js ... - ITNEXT
We'll implement it as a single-file-template that will in turn demonstrate using a file-system oriented tree browser. In src/renderer/components ...
Read more >
webContents | Electron
webContents.getAllWebContents() ​. Returns WebContents[] - An array of all WebContents instances. This will contain web contents for all windows, webviews, ...
Read more >
create new version (2e7567e6) · Commits · front / hitrans · GitLab
console.log(`\n ${errorLog}failed to build renderer process`) ... border-radius: 4px; ... log += chalk.yellow.bold(`┏ ${proc} Process ${new Array((19 ...
Read more >
Check-in Differences - Leo-el-vue
webpack.renderer.config') let electronProcess = null let manualRestart = false ... if (/[0-9A-z]+/.test(log)) { console.log( chalk[color].bold('┏ Electron ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found