2

As said in the title, I would like to redirect console.log messages that appear in my browser console to my windows terminal - for example the built in terminal in VSCode. Is there a way to achieve this result with some built in browser functionality or it would rather require me to run some external tools, a proxy backend or virtual browser like Selenium? The question concerns React apps made with webpack. Thanks.

kenshin
  • 165
  • 3
  • 10
  • You can in theory overwrite the console.log function to send output via ajax to the backend instead. Can you tell us what the end goal is? Is this about debugging an app without access to the user's browser console? –  May 27 '20 at 12:40
  • @ChrisG yes, because of specific characteristics of the app, opening the console makes it hard to perform certain actions, so I would rather to keep the logs in my VSCode terminal - this would greatly enhance my development process. I think that redirecting console.logs to some local backend is a great idea. So you suggest to overwrite console.log function, at the begginig of the application for now ? – kenshin May 27 '20 at 12:51
  • Yes, pretty much. I'm experimenting with this and here's what I have now: https://jsfiddle.net/khrismuc/2bshoknf/ (I added a queue that makes sure the logging happens in the proper sequence) –  May 27 '20 at 13:37
  • Since you accepted the Selenium answer I just wanted to comment that logging to a console other than the browsers always requires some kind of server running somewhere; what else is supposed to do the logging? –  May 27 '20 at 16:58
  • @ChrisG to be honest, I did created a semi-backend proxy, that accepts post-requests redirected from the frontend and displays them in VSCode console where it was launched from, but the issue is when the request body content is too big - it crashes. The selenium option on the other hand creates a lot of temporary files from the webdriver and is a bit "heavy" as I mentioned, so it is not really the best solution to this issue. – kenshin May 27 '20 at 17:52

1 Answers1

0

This is documented in the javascript API documentation: 

 driver.manage().logs().get(logging.Type.BROWSER)
     .then(function(entries) {
        entries.forEach(function(entry) {
          console.log('[%s] %s', entry.level.name, entry.message);
        });
     });

** NOTE:** Only a few browsers support the remote logging API (notably Firefox and Chrome). Firefox supports basic logging functionality, while Chrome exposes robust performance logging options. Remote logging is still considered a non-standard feature, and the APIs exposed by this module for it are non-frozen. This module will be updated, possibly breaking backwards-compatibility, once logging is officially defined by the W3C WebDriver spec.

https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/lib/logging.html

Your question is tagged JavaScript, but you write about python, you can the logs in a similar way in Python, see: Getting console.log output from Chrome with Selenium Python API bindings and https://docs.python.org/3/howto/logging.html

Niels van Reijmersdal
  • 2,038
  • 1
  • 20
  • 36
  • i did mention Selenium but this was a rather finality, i think i should remove this mention since i actually seek for the most effective way and Selenium seems to be a bit heavy. I like @Chris G's approach though but it still requires to run some sort of additional proxy backend anyway. Obviously i did need to mention that question considers debuggin webpack's React app but i'd rather have a general approach – kenshin May 27 '20 at 13:12