23

When I used brackets, there was a plugin to display console.log output in a panel below the source code panel, so I don't need switch to chrome and press F12 to view console.log output.

But how to do that in Visual Studio Code?

I use Visual Studio Code for HTML development not Node.js.

Penny Liu
  • 15,447
  • 5
  • 79
  • 98
lionyu
  • 593
  • 3
  • 5
  • 14

4 Answers4

20

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

Amila Dulanjana
  • 1,884
  • 1
  • 16
  • 33
  • 18
    -1: Just putting a link to another site is not the kind of answer expected on SO. Giving a short explanation would be appreciated. – Jean-François Beauchamp May 17 '17 at 18:10
  • same, adding a site link is not what an answer should be – pixel Aug 14 '17 at 04:04
  • 13
    Well this answer is much better than nothing, and me and 5000 others are happy it exists, post a better one instead of down voting. Thanks Amila! – Elliott Beach Feb 03 '18 at 01:43
  • 1
    What if we are using IE11? How to see console.log messages in VS code itself ? – Karthik Feb 23 '18 at 11:48
  • I have an electron app, the console.log on the main.js does show on VSCode console but all other console.log called from other .js files (mi app has 3 html & js) only appear on the browser console. FYI i'm using the debbuger for chrome extension. any ideas? – Gatunox Aug 07 '18 at 01:43
  • `debugger-for-chrome` is now deprecated in favour of `vscode-js-debug` – Stewart May 16 '22 at 09:43
  • Not sure how this gives us `console.log()` output – Stewart May 16 '22 at 09:46
8

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

Stewart
  • 17,616
  • 8
  • 52
  • 80
  • 1
    Should be the top answer now in the year 2022 (almost 2023), thank you very much! – tkazik Dec 17 '22 at 17:02
  • why the hell I'm not seeing this "Embedded Live Preview" option, even though my live preview broser is open??????? – Gintas_ Mar 07 '23 at 21:39
3

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

Lewger1637
  • 39
  • 4
  • A link to where you found this solution would also suffice. – Bruno Jan 02 '20 at 00:58
  • There’s no link to where I found the solution. Install the Live Server extension so they when you save your .js file the Clothing browser automatically updates and prints console.log. – Lewger1637 Jan 02 '20 at 02:22
  • 1
    Just in case anyone needed more clarification for this method. The VS code extension is called 'Live Server' by Ritwick Dey. https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer . Once you install this extension, you create your HTML file, link your JS file as usual. Then right click the HTML file and select 'Open with Live Server'. A browser window will open showcasing your HTML file. Right click on this window and select 'Inspect' to open the dev tools, then select 'Console'. Your JavaScript Console logs will output here. – skaz Apr 21 '20 at 14:29
  • Not sure how this gives us `console.log()` output – Stewart May 16 '22 at 09:46
0

I have added the 'Code Runner' extension Example:

  1. Best dynamic one: https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode&ssr=false#review-details

  2. Option: https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner&ssr=false#review-details

There are also terminal commands you can run and output on the terminal too.

Yasin Bekar
  • 127
  • 1
  • 4