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
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.