console.log with electron

[ibrahimaljalal]

Problem Description: I would like to debug my main.js file which uses electron.js by simple using console.log(). when I run my python code obviously I can see the output of my print statements in the terminal but that is not the case when I write console.log in my main.js file with node.js . I know that one way is to send from node to the browser and see the output in the dev tools but this is a little complicated in defies my purpose.

Code Snippet(s): This is my main.py and main.js code snippets which are almost identical to 09 - Eelectron-quick-start code in the examples folder. I don't think this issue needs snippets but I have just added them just in case.

main.py:

import eel

eel.init('web')

@eel.expose  
def say_hello_py(x):
    print('Hello from %s' % x)

say_hello_py('Python World!')
eel.say_hello_js('Python World!') 

options = {
    'mode': 'custom',
    'args': ['node_modules/electron/dist/electron.exe', '.']
}

#my code
########################################
print("this part will show in the terminal")
########################################

eel.start('hello.html', mode='custom', cmdline_args=['node_modules/electron/dist/electron.exe', '.'])

main.js:

const {app, BrowserWindow} = require('electron')

let mainWindow

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  mainWindow.loadURL('http://localhost:8000/hello.html');

  mainWindow.on('closed', function () {

    mainWindow = null
  })
}

app.on('ready', ()=>{

  /*my code */
  ///////////////////////////////////////////////////////////////////////////
  console.log("this part will not show in the terminal")
  ///////////////////////////////////////////////////////////////////////////

  createWindow()

})

app.on('window-all-closed', function () {

  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {

  if (mainWindow === null) createWindow()
})

Desktop:

• OS: Windows 10 Pro, Version 21H2
• Browser: Chrome
• Python Version: 3.9.12
• IDE: vs code

[dardevelin]

Disclaimer I have just followed the project and not used it enough to suggest with confidence.

I believe that console.log is a browser function which javascript binds to. You may want to build your own python version of console.log and call that one instead. Expose that function to your javascript and use it instead.

@eel.expose
def jsconsole_log(any_object):
    print(any_object)
    return

Hope it helps Happy Hacking

[ibrahimaljalal]

Thank you dardevelin for your reply 😊 . I have three comments:

1- You can use console.log with node. 2- As far as I know with eel you can't directly send a message from node.js to python and vice versa (this only works if the javascript file runs in the browser). I really wish you could. that would be more convenient 3- Surely there are multiple ways to debug an electron project with eel. One way is to send a message from main.js (which runs by node) to another .js file in the browser and then use the dev tools to see the results but that would overcomplicate a simple task.

[dardevelin]

@ibrahimaljalal You are welcome,

Let's consider on your comments: If eel didn't support a way of exchanging data between javascript and python runtimes it would be useless.

1-You can use console.log with node.

You can in node, but eel is python and the difference is significant. A browser tends to have multiple threads of the same process responsible for independent functions. CSS Engine, Javascript Engine, HTML (DOM) process.

These still live under the same main execution, and thus have access to each others memory context as they are loaded modules of a single executable.

Node in an extreme simplification is a shell wrapper + javascript interpreter loaded into that shell process as a module. Meaning you can continue moving the interpreter context back and forth to the browser and thus have access to the memory in both sides.

Notice that eel is not using nodejs but rather is driving the browser via a web driver and exposing via some interface communication between both processes. Thus allowing you to 'Remote call' from one process to the other.

Do not confuse eel (nodejs) logging library with eel in here which is an electron like implementation in python.

there is an answer in this post showing how to exchange data form both sides: https://stackoverflow.com/questions/63364441/pass-javascript-variable-value-to-python-with-eel

[ibrahimaljalal]

I am sorry it seems that there has been some misunderstanding. The question was not about how to communicate between python and javascript in eel. Also, It seems that by a coincidence there is a package in npm which is called eel and it is related to logging 😅🙃. I assure you I was not referring to it and in my main.js file above I did not include it.

Here is what I want to test: In the examples folder in this repository there is an example named "09 - Electron-quick-start" inside it is a file named main.js. if there is a console.log("hello world") in this file, how can I see the "hello world" in the terminal without changing any code in the other files?

I did not know how the browser or node works. thank you for your explanation.

Anyway the problem was solved slightly different than what I wanted. I used the fs module in node. so instead of using console.log() I print what I want in a .txt file.

thank you @dardevelin for your help. I appreciate your time.