Debug JavaScript in Visual Studio Code (without F12 the Chrome Debugger)

In the previous post on Visual Studio, we saw How to connect GitHub accounts with Visual Studio? In this post we shall learn to debug JavaScript in Visual Studio Code without using F12 i.e. the Chrome Debugger.

visual studio code javasript debugger
Source: code.visualstudio.com

Recently, Microsoft created the built-in JavaScript debugger for Visual Studio Code. Visual Studio Code is an open source and the most popular cross-platform code editor for developers. Many a times, developers are confused on how to debug in visual studio code.

Earlier, most of the developers either used F12 i.e. the Chrome Debugger or the Microsoft Edge Debugger. These are now no longer needed to debug as now JavaScript debugging is now built-in to Visual Studio Code.

Hence the earlier extensions can be deleted now safely. The browser Edge team announced that JS developers in VS Code can safely remove the Chrome Debugger and the Edge extensions. Let’s see then how to use the VS Code JavaScript debugger.

How To Debug JavaScript in Visual Studio Code?

Open your project in VS Code. Then start a session by pressing F5 or activating the debug icon in the menu bar and selecting Run and debug. Alternatively, you can also use the Visual Studio Code command palette and run the Debug: Open Link command. From there on you can choose to debug in Chrome, Edge or Node.js without having to install any extensions.

3 Ways To Debug JavaScript in Visual Studio Code

In short, the new debugger can be used in the below 3 ways without installing any extensions

  • F5 – Start Debugging
  • Menu bar -> Debugging icon -> Run and debug
  • Open the Visual Studio Code command palette and running the Debug: Open Link command
enable visual studio code javascript debugger
Source: blogs.windows.com

Extra Inspect Button – If Using Edge Browser

For those users who will be choosing Edge, you will be able to see one extra feature in the debug toolbar. It will be an inspect button as shown below

inspect button in visual studio code debug toolbar
Source: blogs.windows.com

How To Install Microsoft Edge Dev Tools for Visual Studio Code Extension?

This button will launch an Edge Developer Tools. It will open this inside Visual Studio Code. On the first activation, the Visual Studio Code editor will first inform you to install the Microsoft Edge Dev Tools for Visual Studio Code extension. After installing the same, this prompt will disappear.

Prompt to install the Microsoft Edge Dev Tools extension
Source: blogs.windows.com

The Dom Elements Inspector

The below images show the Elements inspector in VS Code. You can inspect or change the Cascading Style Sheets or see the requests in the network without leaving your Visual Studio Code editor.

Elements inspector in Visual Studio Code
Source: blogs.windows.com

Bonus Debug Console in VS Code Editor

Now one can use the Debug Console in the VS code editor. With this you can interact with the browser document in the browser. Also you have access to the window object and you can also use the Console Utilities API.

Debug console in vs code
Source: blogs.windows.com

How To Automatically Attach Microsoft Edge And Launch Developer Tools in VS Code Editor?

  • Create a launch.json file.
  • Change the default `https://localhost:8080` for your project as shown below
    { “version”: “0.2.0”, “configurations”: [ { “type”: “pwa-msedge”, “request”: “launch”, “name”: “Launch Microsoft Edge and open the Edge DevTools”, “url”:http://localhost:8080“, “webRoot”: “${workspaceFolder}” } ]

Useful Tips For Working With VS Code

How To Open Terminal In Visual Studio Code

  • Hit the Ctrl + ` shortcut (backtick) character.
  • Click View -> Terminal menu command.
  • Hit Ctrl + Shift + P for the Command Palette, then the View: Toggle Integrated Terminal command.

Open Visual Studio Code From Terminal Windows

Visual Studio Code has a command line to launch the editor. You can launch the VS Code editor from the command line to open a project, folder or file. Type

code .

Open Visual Studio Code From Terminal Ubuntu

  • Open Visual Studio Code
  • Press Ctrl + Shift + P
  • Type install shell command

Visual Studio Code Terminal Not Working

Go to File -> Preferences -> Settings and search for specific settings by the setting ID and see below settings related to terminal.integrated that can affect the editor launch

  • terminal.integrated.windowsEnableConpty – If ConPTY is being used for Windows terminal process communication
  • terminal.integrated.shellArgs.{platform} – This is the command-line argument of the shell launch
  • terminal.integrated.shell.{platform} – Shell path of the terminal uses
  • terminal.integrated.env.{platform} – Environment variables added to the shell
  • terminal.integrated.cwd – Current Working Directory for shell

Summary

The VS Code team has now allowed developers to automatically debug with browsers right from Visual Studio Code and has also has made it a lot easier. In this article we saw how to debug JavaScript in Visual Studio Code. Do share your experience in the comments section below.

Hitesh Boricha

I have a little over a decade experience in the IT industry. Having worked in various roles in this industry, I am passionate about technology.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.