That is almost what I am looking for. But after seeing your picture, I opened up WebmakerApp to test it out and it apparently has a real-time preview on the console.
The drawbacks however are that the console has a limitation on resizing and is filled with a log history/current log instead of the current error only. Makes it a bit cluttered to use but it does work.
The FCC console will display error locations in the code as shown in picture. This makes it so useful for cleanly pinpointing errors. For a real-time preview offline, WebmakerApp is hands the best for HTML/CSS/JS but the FCC console is too tempting to pass up for standalone javascript coding.
Here is picture of what was mentioned.
Click the 
button and it clears the console. 
Try to install install Node.Js
1 Like
- If you enable the Monaco editor option like I mentioned previously, you should be able to see the error highlighted as red underline and red block (right section of the code editor) right in the source code instead of the log which I personally see as an advantage from experience for larger code base.
-
About the clutter, you can disable the preserve console log option in the setting to display only the current output of your javascript code. This behavior is exactly what you want as in freecodecamp console.
-
Yes, you are right about being not able to resize the console further.
-
For me the biggest issue with webmakerapp is rather about the linter. It is not as strong or detailed as what freecodecamp console offers. For example, invoking a non declared function would go pass through the webmakerapp linter unlike the freecodecamp’s one.
Otherwise, using freecodecamp’s monaco editor fork + nodejs REPL + linters for verifying source code filles as suggested by the others would be a much better idea.
All the best in your journey.
