Christian Heilmann

Posted on Mar 17, 2021 • Originally published at christianheilmann.com on Mar 5, 2021

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

#vscode #webdev #debugging

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.

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.

If seeing this in React makes you 🤮, get Sentry.

Try Sentry

Top comments (0)

5 Playwright CLI Flags That Will Transform Your Testing Workflow

0:56 --last-failed: Zero in on just the tests that failed in your previous run

2:34 --only-changed: Test only the spec files you've modified in git

4:27 --repeat-each: Run tests multiple times to catch flaky behavior before it reaches production

5:15 --forbid-only: Prevent accidental test.only commits from breaking your CI pipeline

5:51 --ui --headed --workers 1: Debug visually with browser windows and sequential test execution

Learn how these powerful command-line options can save you time, strengthen your test suite, and streamline your Playwright testing experience. Click on any timestamp above to jump directly to that section in the tutorial!

0:56 --last-failed: Zero in on just the tests that failed in your previous run
2:34 --only-changed: Test only the spec files you've modified in git
4:27 --repeat-each: Run tests multiple times to catch flaky behavior before it reaches production
5:15 --forbid-only: Prevent accidental test.only commits from breaking your CI pipeline
5:51 --ui --headed --workers 1: Debug visually with browser windows and sequential test execution

Watch Full Video 📹️

DEV Community

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

If seeing this in React makes you 🤮, get Sentry.

Top comments (0)

5 Playwright CLI Flags That Will Transform Your Testing Workflow

Okay