How to display console.log output in Visual Studio Code for html?

debugger-for-chrome can solve the problem. Check this link. It shows how to do that

--UPDATE--

Now VS code has built in debugging support for Javascript.

enter image description here

You can easily debug your application by clicking on the Run and Debug button as shown in the image. If you want to debug any other languages or runtimes, you need to install a debugger extension for that specified language or runtime in the VS code marketplace.

https://code.visualstudio.com/Docs/editor/debugging


You could create an index.html and link to your .js in head then use Live Server with an "undock separate window."


The vscode extension you want is Live Preview.

This gives you a HTML preview pane within vscode itself. To activate it:

  1. Right-click on your HTML file, and select Live Preview: Show Preview. This is like a mini browser which will display your HTML. (Shown with red circle)

select live preview


  1. To find your console.log() messages, select the OUTPUT tab, and from the drop-down, select Embedded Live Preview Console (Shown with red arrow)

output console


  1. Finally, hit the "Refresh Arrow" in the preview pane, and you should see the console.log() output.

refresh