[10/15/20] Show console message directly in editor (Web Editor App)
Bo Tinker published on 2020-10-15T19:30:16Z

Some web coding challenges in OYOclass will ask students to print something to the console. The `console.log` function will be utilized to achieve this goal. Once the message is printed to the console, students need to manually open the console to see the result. This process sometimes might be hard and confusing for students: in Windows, students need to press keys ctrl + shift + i to open it, and in macOS, students need to press keys cmd + option + i.

Now with this new update, students can directly see the console message within the Web Editor App. If students write some code like:

  • console.log
  • console.info
  • console.warn
  • console.error

or there are some Javascript errors in their code, in the "Preview" mode, the Web Editor app will automatically detect some messages have been written to the console, then open our customized console to students. With this new method, students don't need to manually use the above key combo to open the browser's console anymore.

Here is an example below:

We have some Javascript code to use `console.info` and `console.log` to write messages to the console. When we turn on the "Preview", the Javascript begins to run, and the our customized console will automatically open up to show us the messages, helping us debug our programs.