DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Christian Heilmann
Christian Heilmann

Posted on • Originally published at christianheilmann.com on

How to debug web projects using the browser developer tools inside Visual Studio code

With the 1.1.4 release of the Microsoft Edge Devtools for Visual Studio Code extension we have added the final bit that people kept asking for: Console messages now show up in the output console of Visual Studio Code.

The extension in action

To celebrate and as it has been long coming, I recorded a quick, roughly four minute video walkthrough showing how:

  • You can start a server inside Visual Studio Code in the correct folder without using an external terminal
  • You start using the extension by creating a new instance of Edge running inside the editor
  • How to debug network issues in the editor
  • How to tweak the DOM and CSS in the editor
  • How the extension allows you to activate the link to a style sheet in the CSS editor to jump to the correct line in the file inside the VS Code editor

The extension is available from the market place and inside of Visual Studio Code. It is open source and you can file issues on GitHub and see what's coming next.

Latest comments (0)

Thank you.

Thanks for visiting DEV, we’ve worked really hard to cultivate this great community and would love to have you join us. If you’d like to create an account, you can sign up here.