Visual Studio Code

Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js so it's a great tool for web developers right out of the box! Head to this page to download Visual Studio Code if you aren't using it yet.

Extensions

To acquire any of the extensions highlighted below, navigate to Extensions (Ctrl + Shift + X on Windows or Command + Shift + X on Mac) in VS Code.

Search the Marketplace for the specific extension and select Install.

Installing the Debugger for Microsoft Edge VS Code extension

Debugger for Microsoft Edge

With the Debugger for Microsoft Edge VS Code extension, you can debug your front-end JavaScript code line by line and see console.log() statements all directly from Visual Studio Code!

This extensions gives you the ability to launch or attach to both Microsoft Edge (EdgeHTML) and Microsoft Edge (Chromium). Check out this page for a walkthrough of debugging Microsoft Edge from VS Code and sample launch.json configurations.

GIF of the Debugger for Edge VS Code extension in action!

Elements for Microsoft Edge

By adding the Elements for Microsoft Edge VS Code extension, you can use the browser's Elements tool from within Visual Studio Code. By either launching or attaching, the Elements tool will connect to an instance of Microsoft Edge, display the runtime HTML structure, and allow you to alter the layout or fix styling issues.

For more information, check out this page.

GIF of the Elements for Edge VS Code extension in action!