Adding breakpoints to your code will make debugging much easier. The final tip that I will leave you with is the humble breakpoint. You can find more information about what can do in the debugger console, here. You can obviously use the debug console to do the same things as you could within the usual browser console tab. Instead of having to type out document.querySelector() you can use $ as a quick reference. The benefit of using the console to access elements is that you get access to a handy shortcut. Once the debugger has launched and attached, you can also use it to query the element on the page.

Using console.log() isn't the only useful feature of the debug console. Get data from an API on page load, render it out here 🔥🔥🔥 This technique can be useful when you don't want to leave VS-Code and you want to check data. In your debug console you should now see the output of your console.log statement. On the screen that pops up, click the 'Run and Debug' button. In the side ribbon, click on the 'Run and Debug' option, or, use the shortcut key Control + Shift + J.

Next, log out some data using normal console.log() as can be seen below: Resolution 1 Open Task Manager and Kill all existing Visual Studio Code Process and then re-open relevant Visual Studio Code Project VS Code : Processes In Task Manager Resolution 2 Download latest version of Visual Studio Code and then install latest version this will also ensure this error goes away Hope this Helps. Add a script tag and add some JavaScript to it. Luckily, debugging an HTML page that contains JavaSCript is super simple using VS Code.įirst, the best debugging tip is learning how to write to the debug console. Learning how to debug your code is an essential step to becoming a coding legend 🐉🐲🧝‍♂️🦄🧚🧙🏽. It has been the default JavaScript debugger in Visual Studio Code since 1.46 (we're now at v1.58) and is even being rolled out into the Visual Studio IDE.In this tutorial, you will learn how to use the Visual Studio Code debugger. That built-in experience comes via vscode-js-debug, a GitHub project described as a Debugger Adapter Protocol-based JavaScript debugger that works with Node.js, Chrome, Edge, WebView2 and VS Code extensions. The company's Edge browser development team recently announced that JavaScript developers in VS Code can now uninstall the Debugger for Chrome and/or the Debugger for Edge extensions for a new, simplified debugging experience.

Microsoft has created a built-in JavaScript debugger for Visual Studio Code, the wildly popular, open source-based, cross-platform code editor.

Visual studio code javascript