0

I am learning javascript in vscode and using liveServer extension to get my html and js runnning on chrome...and i see my js output in "inspect element->console" which works perfectly fine...now i have seen chrome developers tools integrated in vscode and you can open them in vscode from help and then selecting developers tools.....but thing is i dont get my js output there...how to do that....i am learning from tutorial on youtube--"https://www.youtube.com/watch?v=W6NZfCO5SIk" and he is doing the exact thing from the time stamp 16:11 (variable section), that i want.

i have tried changing the ports of liveserver and setting the default browser to null which eventually open edge browser.

all this happens when i go live with the live server extension.

i expect my js output on that console but i get this:

[Extension Host] [32mServing "c:\VCodeCpp\" at http://127.0.0.1:5500[39m
workbench.main.js:238 [Extension Host] [36mReady for changes[39m-------

and when change something in js file, it says

[Extension Host] [36mChange detected[39m c:\VCodeCpp\index.js----------

while the output in chrome is perfectly fine

wOxxOm
  • 65,848
  • 11
  • 132
  • 136
himanshu
  • 3
  • 1
  • 2

2 Answers2

1

It sounds like you are on the right track with the live server extension, from what I can tell in the video you linked what you are referring to is the Debugger for Chrome visual studio code extension.

This can be downloaded within visual studio code in the extensions panel after searching "debugger for chrome"

Download through that link or directly within VS Code If you use that along with the web server, You would just first need to link the debugger to the port the server is on you should see the output in the chrome-tools.

Follow this Guide on Getting started with Chrome Tools in VS Code

I hope this helps, as I am still new to answering on SO but this looked like something I could make a solid attempt.

Vincent
  • 26
  • 6
  • I appreciate your answer, but i am not able to link it...i run the chrome on the port on which debugger in vscode is listening but still it is not able to get outputs...or may be i am doing it wrong, so if you could guide me step by step...that would be really good....{i have installed debugger for chrome} – himanshu Jun 09 '19 at 17:15
  • Sorry, I don't use that on Clientside JavaScript so can't be more help there. I will say if you have a script attached to HTML you can open the HTML page, click inspect source/f12 to open up the Devtools and click source to view the JavaScript attached to the file, click on Sources and if you have [`debugger;`](https://www.w3schools.com/js/js_debugging.asp) statements inside the script with the devtools open you can view inside your JavaScript codes execution. I wish I could be more help however I only have the devtools attached to my node.js files for serverside debugging. – Vincent Jun 09 '19 at 17:52
1

In addition to enabling the "debugger for chrome" extension, please check for the Javascript console.log () output in the VS Code "DEBUG CONSOLE" tab, instead of in the usual "TERMINAL" tab. You'll probably have to hit F5 for the output to show up.

This method "sorta" worked for me -- but it wasn't fully reliable: I didn't get all the output I expected. Still, I think it's how it's "supposed" to work.

bob
  • 41
  • 6