Where is the "console", and its log?

1

I am following a Winsocket code example tutorial on RandomNerd, which works well. However, the source code includes statements like:

console.log(‘Connection opened’);

Whilst I can see the output from ‘serial.print’ statements on the terminal, I can’t see outputs from statements like the one above.

I know this will be an absurdly elementary question, but any recommendations for a beginner’s tutorial would be much appreciated. The Community ‘Get Started’ tutorials tend to be hardware-specific and mostly go over my head.

3

You mean the browsers console log? Depends on the browser. Usually right-click in empty space → Inspect (element) → console.

grafik

Are you working with PlatformIO for this project? Seems like a JavaScript / web development question to me.

Ah, I think you mean ESP32 WebSocket Server: Control Outputs (Arduino IDE) | Random Nerd Tutorials.

4

Thanks for the correction Max. Sorry, I meant ‘Websocket’, not ‘Winsocket’ and yes, the link you have given is for the tutorial I am working on. Yes, I am working with PlatformIO for this project.

I don’t know what ‘browsers console log’ means. If I right click on empty space on my iMac I don’t see ‘Inspect(element)’ as an option.

This is my query:

One of the functions in the tutorial source code in the above link is:

function onOpen(event) {
console.log(‘Connection opened’);
}

I would like to know where, when I run the code on my ESP32 board, using PlatformIO, I can see the words “Connection opened” so that I can confirm the code is working as expected.

Thanks.

5

If I read the tutorial correctly it’s about programming an ESP32 with a firmware that will open a webserver. When you open the website served by this webserver in your browser, the JavaScript transfered from the ESP32 to the browser runs in the browser. Part of the code is

<script>
  var gateway = `ws://${window.location.hostname}/ws`;
  var websocket;
  window.addEventListener('load', onLoad);
  function initWebSocket() {
    console.log('Trying to open a WebSocket connection...');
    websocket = new WebSocket(gateway);
    websocket.onopen    = onOpen;
    websocket.onclose   = onClose;
    websocket.onmessage = onMessage; // <-- add this line
  }
  function onOpen(event) {
    console.log('Connection opened');
  }

The console.log(x) will produce a log in the JavaScript console of the browser.

Refer to https://support.monday.com/hc/en-us/articles/360002197259-How-to-Open-the-Developer-Console how to get into that console for your browser. Everyone is a little bit different – Safari hides the setting additionally behind a checkbox.

6

That’s exactly it!
Many thanks Max for explaining this so clearly, you have helped me a lot. Thanks also for the link to the excellent website about using the browser console.